Crown Clothing

Open Project

A project made as part of an upskilling project in the following technologies: React, Redux, Firebase.

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

  1. 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.
  2. 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.
  3. 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.