This project is a fictional online shop developed as a learning exercise to explore the full stack development process. The shop features a catalog of items, user authentication, a shopping basket, and a dynamic frontend that interacts with a real-time database. The primary goal was to gain hands-on experience with modern web development tools and technologies.
Key Features
Shopping Basket: Functionality to add and manage items in a user-specific shopping basket.
Product Catalogue: A dynamic display of products retrieved from a real-time database.
User Authentication: Secure sign-in functionality allowing users to create accounts and log in.
Technologies Used
- Redux: Implemented Redux for state management to efficiently handle the application’s state, providing a predictable state container that makes it easier to debug and manage.
- Firebase: Integrated Firebase for both user authentication and as a backend database solution. Firebase Authentication was used to handle user sign-in and registration, while Firestore (Firebase’s NoSQL database) stores and retrieves product and user data.
- React: Built a responsive and interactive frontend using React, leveraging its component-based architecture to create reusable UI components and manage state more effectively.
- CSS/Styled Components: Enhanced the user interface with custom styles and responsive design to ensure a great user experience across all devices.
Project Setup and Implementation
- Redux Store Configuration: Set up a Redux store to manage the state of the application. Actions and reducers were defined to handle product display, user authentication status, and shopping basket updates.
- Firebase Integration: Configured Firebase Authentication for secure user login and registration. Set up Firestore to store product data and manage real-time updates to the application’s catalog.
- Frontend Development: Designed and implemented a frontend interface using React. Products are fetched from Firestore and displayed dynamically, allowing users to browse and add items to their shopping basket. The application features a clean and intuitive UI, ensuring easy navigation and a seamless shopping experience.
Code Repository
The complete codebase is available for review and collaboration here.