MacMatch
It is an e-commerce website which provides various types of electronic products with online services.
Overview:
This product is a collaborative project built by four developers in four days. It is a website with multiple pages and features for users to browse and purchase products. The website has a home page, product page, cart page, shipping page, signup page, admin page, and more. It uses technologies like React, Redux, Redux-Thunk, Chakra UI, and Material UI.
Features:
- Home Page: The website has a home page with a navbar and footer. It also includes a dropdown content feature and a search functionality.
- Card Carousel: The home page features a card carousel that displays products.
- Back to Top functionality: The website has a "Back to Top" functionality that allows users to quickly navigate back to the top of the page.
- Product Page: The website includes a product page that allows users to view and filter products by category. Users can also sort products by price and add them to their cart. Pagination functionality is also available.
- Cart Page: The cart page displays the items added to the cart and provides a total summary. Users can proceed to checkout from this page.
- FAQ Sections: The website includes FAQ sections to provide answers to frequently asked questions.
- Checkout Page: The checkout page allows users to proceed with the purchase by providing shipping and payment details.
- Login & SignUp Page: Users can login and signup with their email or phone. The login page includes authentication and validation. User's name is displayed on the navbar after signup.
- Data Store In Local Storage: The website stores user data in the local storage.
- Google Login Integration: Users can login to the website using their Google account. After login, the user's image is displayed on the navbar.
- Admin Page: The website includes an admin page with a dashboard. It provides summaries of all products, logged in users, and orders. It also displays price summaries.
Summary:
This collaborative project is a feature-rich website that allows users to browse and purchase products. With a variety of pages and features like search functionality, filtering, sorting, cart management, and authentication, it provides a seamless shopping experience for users. The project was built using React, Redux, Redux-Thunk, Chakra UI, and Material UI by a team of developers in just four days.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Firebase
Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.