Project Name
Description
This e-commerce website showcases a vitual drift pilot and their products, catering to Asseto Corsa enthusiasts and fans of virtual drifting. It features a user-friendly interface with the following sections:
- Home: Introduces the virtual drift pilot and their expertise.
- Explorer: Allows navigation through product categories.
- Videos: Features video content related to the virtual drift pilot.
- Recommendations: Showcases recommended products.
The website also includes a dedicated store page with:
- Browsing by category using filters.
- Individual product details with images.
- Buttons redirecting users to affiliate links for purchasing products.
The footer provides links to the virtual drift pilot's affiliates.
Technology Stack
Frontend: Next.js (React framework)
- Additional Frontend Libraries:
- @nextui-org/react (UI components)
- axios (HTTP client)
- framer-motion (animations)
- react-icons (icons)
- react-slick (carousel)
- Styling: Tailwind CSS
- Linting: ESLint
- Type checking: TypeScript
Backend: Node.js with Express
- Database: SQLite
- Additional Backend Libraries:
- bcryptjs (password hashing)
- cors (cross-origin resource sharing)
- express-async-errors (error handling)
- jsonwebtoken (JSON Web Tokens for authentication)
- knex (SQL query builder)
- multer (file upload handling)
Setup Instructions
Frontend:
-
Prerequisites:
- Node.js and npm (or yarn) installed on your system.
-
Clone Repository: Clone this repository to your local machine using Git:
git clone https://github.com/Frankdias92/newProjetStore
-
Install Dependencies: Install the project's frontend dependencies:
cd website-adriel999-store npm install # or yarn install
Backend (separete repository):
-
Clone Backend Repository: Clone the backend repository (if separate) to your local machine.
-
Install Dependencies: Navigate to the backend directory and install its dependencies:
cd backend-server-store # Replace with your backend directory name npm install # or yarn install
Running the Application
Frontend:
-
Development Server: Start the development server to work on the website locally:
npm run dev # or yarn devThis will typically open your default browser at http://localhost:3000 (the port may vary).
Backend:
-
Start Backend Server: In the backend directory, run the server:
npm start # or yarn startNote: The default port for the backend server may vary. Check your backend code or configuration for the specific port.
Production Build and Deployment
Refer to the Next.js documentation for deployment instructions specific to your hosting provider: https://nextjs.org/docs. Configure the frontend to communicate with the deployed backend API endpoint.
- Node.js with Express: API server handling product data, user accounts, and interactions with the database.
| Description | link |
|---|---|
| Repository | https://github.com/Frankdias92/product-store-api |
- Next.js (React): Interactive user interface for browsing products, watching videos, and exploring the virtual drift pilot’s word.
| Description | link |
|---|---|
| Repository | https://github.com/Frankdias92/newProjetStore |
| deploy Vercel | https://ecommerce-adriell999.vercel.app/ |
| route auth (login or create a new account) | https://ecommerce-adriell999.vercel.app/admin/login |
Additional Notes
- This project uses Next.js for a server-rendered React application.
- The backend uses Node.js with Express and SQLite for data storage.
- For more information on Next.js, refer to their official documentation.