Moment Clicker

Welcome to Moment Clicker, a user-friendly web application that offers a delightful and secure shopping experience.

Features and Functionality

For Unauthenticated Users

Browsing Non-Protected Routes: Unauthenticated users have the freedom to explore non-protected routes without needing to log in. This makes it easy to browse and discover products.
Restricted Checkout and Profile Access: While unauthenticated users can view products and explore the site, access to the checkout and profile routes is restricted. These sections are reserved for authenticated users.

For Authenticated Users

Access to Checkout and Profile Routes: Authenticated users enjoy full access to the checkout and profile routes, allowing them to complete purchases and manage their profiles seamlessly.
User Account Access: To access their user account, authenticated users can simply click on the profile icon, providing quick and convenient access to their profile and account settings.
Multiple Login Options: Users can create an account with their email and password. However, they need to verify their email address before they can log in. Alternatively, users can log in using their Google and Yahoo accounts for added convenience.
Password Management: Authenticated users can update their password directly from the profile section, ensuring their account's security. If they ever forget their password, there is a "Forgot Password" section to reset it.
Logout: Logging out is as simple as clicking the logout button, ensuring that users can secure their accounts and data easily.

Technologies Used

Moment Clicker is built using a combination of cutting-edge technologies to ensure a seamless and robust user experience:

React: The website is built with React, a popular JavaScript library for building user interfaces.
React-Router: React-Router is used to manage client-side routing, ensuring smooth transitions between different pages.
Firebase: Firebase is utilized for authentication, providing a secure and reliable user management system.
Firebase Authentication: Firebase's authentication features are integrated to offer various login methods and email verification.
Firebase Custom Hooks: Custom hooks make the codebase more modular and maintainable, providing a cleaner development experience.
Tailwind CSS: The website's design and layout are styled using Tailwind CSS, making it both visually appealing and responsive.
React Hooks: React Hooks are used to manage state and side effects in a more elegant and efficient way.

Running the Project Locally

To experience Moment Clicker on your local machine, follow these simple steps:

Download or Clone the Repository: Start by downloading or cloning the Moment Clicker repository to your computer.
Install Dependencies: Open your command line or terminal, navigate to the project's directory, and run npm install to install all the necessary dependencies.
Start the Project: After the installation is complete, run npm start to launch the application. It will open in your default web browser.