The Footwear E-Commerce Website is an innovative online platform tailored to enhance the shopping experience in the footwear industry. This project is built with modern web technologies to provide a seamless, secure, and responsive shopping experience. It caters to footwear enthusiasts, offering features such as product cataloging, secure payment gateways, user-friendly dashboards, and robust backend integration.

www.Footdise.live

The primary objective of this website is to create an efficient online shopping platform for footwear enthusiasts. By leveraging cutting-edge web technologies and prioritizing user experience, the platform aims to:

• Provide a modern, responsive, and secure shopping experience.
• Simplify product browsing with advanced search and filtering capabilities.
• Ensure seamless order processing and secure online payments.
• Empower administrators with tools to manage products and customer orders efficiently.

• Efficiently manages bandwidth by loading the application once, ensuring a faster and more responsive user experience.

• Comprehensive product catalog with filtering and navigation options for easy product discovery.

• Secure authentication system using Appwrite, ensuring role-based access for customers and administrators.

• Customer Dashboard: Manage orders, wishlists, and personal information.
• Administrator Dashboard: Manage products, orders, and user data.

• Streamlined order processing, including status tracking (e.g., Processing, Delivered, Cancelled) and viewing order history.

• Intuitive shopping cart with support for simultaneous logins and wishlist functionality for saving favorite products.

• Built on the MERN-like stack (without MongoDB, using Appwrite), ensuring scalability and maintainability.

• Integrated with Razorpay to handle online transactions securely.

The website is developed using the following technologies and tools:

• Appwrite: Backend-as-a-Service for authentication, database management, and serverless functions.
• Express.js: Framework for handling server-side logic and HTTP requests for the payment gateway.
• Node.js: Server-side runtime for executing JavaScript code.

• React: Library for building an interactive and dynamic user interface.
• React Router: Efficient routing and navigation between frontend pages.
• Vite: Modern bundler and development server for optimized builds.
• Create React App: For initial setup of the React application.

• Razorpay: Secure payment processing for online transactions.

• body-parser: v1.20.2 - Parse incoming request bodies.
• cookie-parser: v1.4.6 - Parse cookie headers for session management.
• cors: v2.8.5 - Enable Cross-Origin Resource Sharing.
• dotenv: v16.3.1 - Load environment variables from .env files.
• nodemon: v2.0.14 - Automatically restart the server on code changes.

• Eraser.io: For designing wireframes and UI layouts.
• Visual Studio Code: IDE for writing and managing code.
• Git & GitHub: Version control and repository hosting.
• Azure: Hosting and server infrastructure management.

• Node.js: v21.0.0 or higher
• npm: v21.0.0 or higher
• Git: For version control

$ git clone https://github.com/JAmanOG/Ecom.git
$ cd Ecom

$ npm install

Create a .env file in the root directory with the following variables:

APPWRITE_ENDPOINT=<your-appwrite-endpoint>
APPWRITE_PROJECT_ID=<your-appwrite-project-id>
RAZORPAY_KEY_ID=<your-razorpay-key-id>
RAZORPAY_KEY_SECRET=<your-razorpay-key-secret>

# Start the backend
$ cd backend
$ npm run dev

# Start the frontend
$ cd frontend
$ npm start

$ cd frontend
$ npm run build

The website is deployed using Azure for hosting both the frontend and backend services. Follow these steps:

1. Frontend Deployment:

   • Build the frontend using Vite.
   • Deploy the build directory to Azure Static Web Apps.

2. Backend Deployment:

   • Use Azure App Service to host the Node.js backend and integrate with Appwrite functions.

3. Payment Gateway:

   • Deploy the payment gateway separately on Azure Functions.

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a feature branch.
3. Commit your changes.
4. Push to the branch.
5. Open a pull request.

This project is licensed under the MIT License.

For any inquiries or feedback, please reach out at:

• Email: [email protected]
• GitHub: github.com/JAmanOG