OurHome

This repository houses the collaborative efforts to create a stunning and functional website for OurHome, the premier destination for chic home decor. Our team is dedicated to bringing the elegance and style of OurHome to the digital realm, focusing on user-friendly design and seamless navigation.

Objective

This project was created to put into practice the coding and problem-solving skills learned at Masai School and to collaborate to create a fully functioning website. The project was created during Construct Week here at Masai, completed in just 5 days, and served as a collaborative tool to explore, learn, and grow.

Project Type

Front_End The project is mainly a front-end project with added dynamic capabilities using a mock API created by json-server. It has primarily been built using HTML, CSS, JavaScript and Bootstrap 5.3 as a framework.

Deployed App

Both the front-end and the mock server have been deployed using render.com. The deployed links can be accessed below.

*Frontend: [https://ourhome.onrender.com/] *Backend: [https://ourhomeserver.onrender.com]

Directory Structure

OurHome/ |--Images/ | |--OurHomeLogo/ | |--userTemplate/ | |--adminDashBoard/ |--backend/ |--scripts/

Video Walkthrough of the Project

• A YouTube video explaining the entire project and showcasing the features and functionalities can be accessed here: [https://youtu.be/Go52nz3dPXQ]
• A YouTube video answering some of the questions related to the project can be found here: [https://youtu.be/S9GNdBrzEjc]

Video Walkthrough of the CodeBase

• A walkthrough of the codebase and the folder structure can be accessed here on YouTube: [https://youtu.be/T1wdv-4WNZA]

Features

• Dynamically added elements using a mock server
• JWT authentication and password hashing
• Responsive and dynamic website
• Dynamic elements added using the Bootstrap 5.3 framework
• Admin dashboard for managing the products

Installation and Getting Started

• After downloading the project, follow these steps to get the project up and running :

  • npm install while on the main directory to install all the dependencies(Bootstrap 5.3)
  • Move into the backend directory using cd ./backend
  • npm install while on the backend directory to install all the dependencies ( json-server, json-server-auth, cors)

• A mock server has been deployed for the backend and can be found here: [https://ourhomeserver.onrender.com/]

  • If you would like to deploy the server on the local system, you can use the following command while in the backend directory: npx json-server db.json -m ./node_modules/json-server-auth/

• Admin Dashboard and related functionalities can only be accessed using the admin credentials. Currently, there is no way to access these elements without using the login credentials provided.

Usage

• Regular Functionalities:

  1. Get started on the landing page by selecting the region and language from the dropdown menu and then pressing the go button.

  2. On the home page, click the login button and click the signup button to register user credentials. Ensure you are using a password with at least 8 characters.

  3. Once registered, you will be directed back to the Home page.

  4. Click on the Hamburger icon in the sidebar to access a list of categories.

  5. On the category page, you can click on the text to enter the page of the desired sub-category. Or you can click on the sidebar again to navigate to another category.

  6. On the sub-category page, you can click on the Add to Cart button to add an item to the cart.

  7. Continue navigating across different categories and sub-categories and adding items to the cart.

  8. Click on the Basket button on the top right of the nav bar to access the cart at any time.

  9. Once on the cart page, you can click the delete button on your items to delete that specific item.

  10. Once satisfied, you can click the checkout button to complete the purchase.

  11. Log out by clicking on the user profile picture icon.

• Admin Dashboard

  1. Get started on the landing page by selecting the region and language from the dropdown menu and then pressing the go button.

  2. Click on the login button and enter the following credentials: email: abhinavtyagi@gmail.com password: 123456789 You must use these credentials to access the admin dashboard.

Credentials

• for admin : email: abhinavtyagi@gmail.com password: 123456789

• Admin Dashboard can only be accessed by using the above-given credentials. Login by clicking the login button on the navbar on the home page.

• Regular users can register using the signup page on the deployed website. Ensure you are using the correct email format and the password is at least 8 characters in length.

• The SignUp page can be accessed by clicking the SignUp button on the login popup.

Technology Stack

• HTML
• CSS
• JavaScript
• Bootstrap Library (Bootstrap 5.3)