Welcome to the totalitycorp-frontend-challenge e-commerce project! This repository contains the source code for our online store built using React, TypeScript, Material UI, and Vite. Below, we'll provide an overview of the tech stack used and the development process.
- React: We chose React as our frontend library for building interactive user interfaces.
- TypeScript: TypeScript helps us catch errors early and provides better code quality.
- Vite: Vite is a fast and efficient build tool that enhances our development experience with features like HMR (Hot Module Replacement).
- SWC: We use SWC with Vite for Fast Refresh to speed up our development process.
- ESLint: ESLint helps us maintain code quality and ensures consistent code style.
- @mui/material: We use Material-UI for a beautiful and responsive design.
-
Setting up the Environment: We started by setting up a clean development environment with Vite and React. Vite's fast development server and React's component-based architecture made it easy to get started.
-
Building Components: We designed and built various components such as product listings, shopping cart, checkout forms, and more. React's declarative nature made it straightforward to create reusable components.
-
State Management: For managing the shopping cart and product data, we implemented a shopping cart context using React's Context API. This allowed us to share state and functions across different components.
-
Fetching Data: To populate our store with products, we used the
fetchAPI to request product data from an external source (e.g., an API or JSON file). We stored this data in the shopping cart context. -
Styling: We used Material-UI to style our components, providing a modern and responsive user interface. Custom CSS was applied where necessary to achieve a unique look and feel.
-
Validation: We implemented form validation for the checkout process using TypeScript. This ensures that users provide correct and complete information before placing an order.
-
Animations: To enhance the user experience, we added animations to various parts of our application. We used the Framer Motion library for smooth transitions and on-scroll animations.
-
Testing: We conducted thorough testing of our application to identify and fix any issues. We used tools like Jest and React Testing Library for unit testing and user interface testing.
-
Optimization: To ensure our application loads quickly and performs well, we optimized our code and assets. We also implemented lazy loading for images and used code splitting to reduce initial load times.
-
Deployment: Finally, we deployed our e-commerce application to a hosting service (e.g., Vercel, Netlify) to make it accessible to users worldwide.
To run this project locally, follow these steps:
- Clone the repository:
git clone <repository-url> - Navigate to the project directory:
cd e-commerce-project - Install dependencies:
npm install - Start the development server:
npm run dev - Open your browser and access the application at
http://localhost:3000
We welcome contributions from the community! If you'd like to contribute to the project, please follow our contribution guidelines.
Thank you for checking out our e-commerce project. We hope you enjoy using it as much as we enjoyed building it!