You are a highly skilled full-stack developer tasked with building a single-page application (SPA) for a web platform focused on vintage technology, particularly Apple products. The platform aims to provide users with reliable information for buying, selling, or maintaining older devices. The core value proposition is to help users determine the true value of products, identify potential issues, access maintenance guides, and facilitate secure transactions.
**Project Title:** Vintage Tech Hub
**Core Features to Implement (MVP):**
1. **Product Valuation Tool:** Users can input specific product details (e.g., model, year, condition, specifications) to get an estimated market value. This will require a backend database with historical sales data and valuation algorithms.
2. **Issue Identification Module:** Based on user-reported symptoms or product details, the system should suggest potential hardware or software issues.
3. **Maintenance & Repair Guides:** A searchable library of guides (text and video) for common maintenance tasks and repairs for popular vintage Apple devices (e.g., MacBook Pro, iMac G3, iPod Classic).
4. **Secure Transaction Facilitator:** Integration with or links to trusted marketplaces for buying/selling vintage tech. Could include escrow services or secure payment gateway recommendations.
5. **Community Forum:** A space for users to share knowledge, ask questions, and discuss vintage tech.
**Technology Stack Suggestion:**
* **Frontend:** React (with Vite for fast development), Tailwind CSS for styling.
* **Backend:** Node.js with Express.js, or Python with FastAPI.
* **Database:** PostgreSQL for structured data (product info, user data, forum posts) and potentially a NoSQL DB like MongoDB for more flexible data if needed.
* **Authentication:** JWT (JSON Web Tokens) for secure user authentication.
* **Deployment:** Docker for containerization, deployed on a cloud platform like AWS, Google Cloud, or Vercel/Netlify for frontend.
**SPA Structure & Routing:**
The application must be a Single Page Application. Use React Router for navigation. Key routes might include:
* `/` (Homepage)
* `/valuation` (Product Valuation Tool)
* `/guides` (Maintenance & Repair Guides - with search and category filtering)
* `/guides/:guideId` (Individual Guide Page)
* `/community` (Forum - with threads and posts)
* `/community/:threadId` (Thread View)
* `/auth/login` & `/auth/register` (Authentication)
* `/profile` (User Profile)
* `/sell` (Transaction Facilitator/Marketplace Links)
**Detailed Instructions for AI:**
1. **Project Setup:** Initialize a new React project using Vite. Configure Tailwind CSS.
2. **Component Design:** Create reusable components for:
* Navigation Bar
* Footer
* Product Card (for displaying valuation results, guides, forum posts)
* Input Forms (for valuation, issue reporting, forum posts)
* Modals (for confirmations, detailed info)
* User Authentication Forms
* Search Bars & Filters
3. **Routing:** Implement client-side routing using `react-router-dom` for the specified routes.
4. **State Management:** Utilize React's Context API or Zustand for global state management (e.g., user authentication status).
5. **API Integration:** Develop placeholder API functions or actual backend endpoints (if feasible within the scope) for:
* Fetching product valuation data.
* Retrieving guides and forum threads.
* Handling user registration, login, and profile management.
* Submitting new forum posts.
6. **UI/UX Focus:** Ensure a clean, modern, and intuitive user interface. Pay attention to responsive design for various screen sizes. The design should evoke a sense of nostalgia while remaining functional and user-friendly.
7. **Data Handling:** Implement proper data validation for user inputs. Handle loading states and error messages gracefully.
8. **Security:** Implement basic security measures for authentication (e.g., password hashing on the backend, secure token handling).
**Deliverables:**
A fully functional SPA codebase ready for deployment, demonstrating all the core MVP features. The code should be well-organized, commented, and follow best practices for React development.