Repository files navigation

Welcome to our Online Jewelry Store! This web application serves as a platform for showcasing and selling a stunning collection of exquisite jewelry.

• Frontend: React

• Backend: Node.js, Express.js, MongoDB, MongoDB Atlas, Mongoose

Back To Top

Our website is fully optimized for all device sizes, starting from a minimum screen width of 340px, ensuring a seamless experience across smartphones, tablets, and desktops.

Back To Top

The application is manually optimized for performance by utilizing React's useMemo, useCallback, and memo functions, to help minimize unnecessary re-renders and improve efficiency.

Back To Top

• All user inputs are validated using regular expressions (regex)
• The validation rules are centralized in a set of constants and utility functions
• DynamicForm component and a useForm hook are used to handle user inputs
• Real-time feedback that ensures all data entered meets the required criteria before submission

• Register Error Handling:
  • When a user tries to register, the application verifies the email against the database
  • If the email is already registered, an error message is displayed to notify the user
• Login Error Handling:
  • When a user tries to log in, the application verifies the email and password against the database
  • If the password is invalid or there is no user with the provided email, an error message is displayed to notify the user

• If a user clicks the "Add To Bag" button without selecting a size, an error message is displayed to inform them of the requirement

• Ensures that data fields such as email addresses follow a standard format, passwords meet complexity requirements, payment details are in correct format etc.

• Includes checks for email uniqueness during registration, verifies the correctness of the old password during password updates, checks if a card is not expired, etc.

Back To Top

• Jest

• Frontend:
  

• Backend:
  

Back To Top

• Floating labels

• Validation Messages

• After submitting any of the forms, the backend also performs validation to ensure that all inputs, including menus and fields, offer only valid options

• Errors related to invalid inputs returned by the backend are displayed to the user

Our website offers a user experience across three languages:

English

Chinese

Bulgarian

• Implemented three distinct user models storing data about:

  • Logging credentials
  • Shipping details
  • Card details

• Each user model is linked by a common user ID:

  • The ID is derived from the logging credentials model
  • The IDs for the shipping and card details models are set at the time of user registration

• Update Email functionality

• Update Password functionality

• Create and Update Shipping details functionality

• Create and Update Card details functionality

• Logout functionality

Back To Top

Make sure you have the following installed on your system:

• Node.js (LTS version recommended)
• MongoDB (for local development or useMongoDB Atlas)
• Git
• A package manager:npm (comes with Node.js)

git clone https://github.com/beatrisilieva/mern-gems-ultimate.gitcd mern-gems

Navigate to the backend directory and install dependencies:

cd servernpm install

Run the backend server:

npm start

The backend should now be running onhttp://localhost:4000.

Open a new terminal, navigate to the frontend directory, and install dependencies:

cd clientnpm install

Start the frontend development server:

npm start

The frontend should now be running onhttp://localhost:3000.

Back To Top