https://github.com/frankdias92/newprojetstore
This project is an e-commerce website showcasing a virtual drift pilot and their products. It utilizes a modern frontend built with Next.js (React framework) for a smooth user experience. Visitors can explore product categories, view individual product details, and be redirected to affiliate links.
https://github.com/frankdias92/newprojetstore
backend-api e-commerce-website expressjs frontend nextjs14 showcasing-skills-learned sqlite sqlite3
Last synced: 3 months ago
JSON representation
This project is an e-commerce website showcasing a virtual drift pilot and their products. It utilizes a modern frontend built with Next.js (React framework) for a smooth user experience. Visitors can explore product categories, view individual product details, and be redirected to affiliate links.
- Host: GitHub
- URL: https://github.com/frankdias92/newprojetstore
- Owner: Frankdias92
- Created: 2024-04-21T00:38:30.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-12T18:51:58.000Z (about 2 years ago)
- Last Synced: 2025-03-26T09:45:58.705Z (over 1 year ago)
- Topics: backend-api, e-commerce-website, expressjs, frontend, nextjs14, showcasing-skills-learned, sqlite, sqlite3
- Language: TypeScript
- Homepage: https://ecommerce-adriell999.vercel.app
- Size: 17.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Project Name**
#### [You can see this project here!](https://ecommerce-adriell999.vercel.app/)
**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:**
1. **Prerequisites:**
- Node.js and npm (or yarn) installed on your system.
2. **Clone Repository:** Clone this repository to your local machine using Git:
```bash
git clone https://github.com/Frankdias92/newProjetStore
```
3. **Install Dependencies:** Install the project's frontend dependencies:
```bash
cd website-adriel999-store
npm install # or yarn install
```
**Backend (separete repository):**
1. **Clone Backend Repository:** Clone the backend repository (if separate) to your local machine.
2. **Install Dependencies:** Navigate to the backend directory and install its dependencies:
```bash
cd backend-server-store # Replace with your backend directory name
npm install # or yarn install
```
**Running the Application**
**Frontend:**
1. **Development Server:** Start the development server to work on the website locally:
```bash
npm run dev # or yarn dev
```
This will typically open your default browser at http://localhost:3000 (the port may vary).
**Backend:**
1. **Start Backend Server:** In the backend directory, run the server:
```bash
npm start # or yarn start
```
**Note:** 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](https://nextjs.org/docs). Configure the frontend to communicate with the deployed backend API endpoint.
## **Deploy back-end**
- 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 |
## **Deploy front-end**
- 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.
___
⚠️ To get acess take a while, almost 50 seconds, because i’m using the free account. (so be patience)