The Shoes Store

Project Description

The Shoes Store is a full-stack web application built with React for the frontend and Express.js for the backend. It provides an e-commerce platform for browsing and purchasing shoes, featuring user authentication, product listings, and various informational pages.

Features

• User authentication (Login/Signup)
• Product browsing and menu
• Location and contact information
• About page
• Responsive design with Framer Motion animations
• Backend API for product data

Tech Stack

Frontend

• React 18
• Vite
• React Router DOM
• Framer Motion
• CSS Modules

Backend

• Node.js
• Express.js
• CORS
• Product data in JSON/CSV format

Installation

1. Clone the repository:

   git clone <repository-url>
   cd project-003
   

2. Install frontend dependencies:

   npm install
   

3. Install backend dependencies:

   cd backend
   npm install
   cd ..
   

4. Start the backend server:

   cd backend
   npm start
   

5. In a new terminal, start the frontend:

   npm run dev
   

6. Open your browser to http://localhost:5173 (or the port shown in the terminal).

Usage

• Navigate through the site using the navigation bar
• Browse products on the Menu page
• Sign up or log in to access user features
• View location, about, and contact information

Project Structure

project-003/
├── backend/
│   ├── controllers/
│   ├── data/
│   ├── routes/
│   └── server.js
├── public/
│   ├── icons/
│   └── images/
├── src/
│   ├── assets/
│   ├── components/
│   ├── modules/
│   ├── pages/
│   └── App.jsx
├── package.json
└── README.md

API Endpoints

• GET /api/products - Retrieve product data

Contributing

Please read the contributing guidelines before making changes.

Work Split for Three Persons

To efficiently develop and maintain this project, the work can be divided among three team members as follows:

Person 1: Frontend Developer

Responsibilities:

• Develop and maintain React components (Hero, Nav, Menu, etc.)
• Implement routing and navigation
• Handle UI/UX improvements and responsive design
• Integrate Framer Motion animations
• Manage frontend state and user interactions

Key Files:

• src/components/
• src/pages/
• src/modules/
• src/App.jsx
• src/App.css
• src/index.css

Person 2: Backend Developer

Responsibilities:

• Develop and maintain Express.js server
• Implement API endpoints for products and user data
• Handle data processing (CSV/JSON)
• Manage server-side logic and middleware
• Ensure API security and performance

Key Files:

• backend/server.js
• backend/routes/
• backend/controllers/
• backend/data/
• backend/package.json

Person 3: QA/DevOps Engineer

Responsibilities:

• Set up and maintain development environment
• Write and execute tests (unit, integration, e2e)
• Handle deployment and CI/CD pipelines
• Monitor application performance
• Manage dependencies and security updates
• Assist with bug fixes and troubleshooting

Key Tasks:

• Configure Vite and ESLint
• Set up testing frameworks
• Manage package.json scripts
• Handle build and deployment processes
• Coordinate between frontend and backend teams

This division allows for parallel development while ensuring clear ownership and expertise in each area.