Welcome to EECS4413 - SunSational Shades Project!
The project is publicly hosted at https://sunsationalshades.shop
NOTE: Skip this section if you are accessing the website online.
Node.js is required in order to run this project, and instructions on how it can be downloaded are at the following link: https://nodejs.org/en/ . Node version can be checked by running node -v if already installed.
To download the project locally, run (https://github.com/faiz5689/Sunsational-Shades.git) in your testing directory, assuming git is installed on the user’s machine. Alternatively, download and unpack the ZIP file from the github repository.
After the files are installed, the user should be able to see 2 directories (frontend and backend) in the 4413-Project folder, which is the parent folder for the project.
The frontend folder is responsible for frontend related tasks. It is important to install necessary packages to run the application. First, navigate to the 4413-Project/frontend directory in a terminal, and issue the command npm install to install all of the required packages and dependencies for the front-end of the application.
Similarly, after this process is complete, do the same for the server side, by navigating to 4413-Project/backend directory and issuing npm install. Again, this will automatically install all required packages needed to run the back-end of the application.
After the setup is complete, the user is now ready to start the app. First, navigate to the 4413-Project/backend directory in a terminal, and run the command node server.js. This should start the node.js server on the application side and connect to the database.
The server is now hosted on port 4000 on the local machine. In another terminal, navigate to the 4413-Project/frontend directory, and run npm start. This will start the React app on http://localhost:3000/. Now, by navigating to this link, we will see the home screen of the application, and the user can now use the application.
The application can be run in 2 ways. Either by using our online application deployed on Netlify and AWS (https://sunsationalshades.shop), or by cloning the repository from github to your local machine. If the latter approach is used, two terminals need to be opened (one for frontend, one for backend). Navigate to the frontend and backend directories, respectively and run npm install in both to install all necessary dependencies. In the first terminal - cd to the frontend directory and run npm start, in the second terminal - cd to the backend directory and run node server.js. The frontend and backend should now be running and can be accessed at localhost:3000.
Once the system is up and running you can start using SunSational Shades. Even though you can browse items without having a user account, we recommend that you create an account first.
Access the home page:
Click the SIGN UP button in the upper right corner of the screen. That will take you to the sign up page.
After signing up, you can log in by going to the LOGIN page.
After signing in, for example, you can view products by going to the PRODUCTS page. You can sort by name or price, and filter by category, colour and brand. You can also apply multiple filters at the same time. NOTE: JWT Authorization Tokens expire after 12 hours. Sometimes it might seem like you are logged in (in the frontend), but when you make a backend request (such as adding an item to cart, an authorization error might occur because your token is expired and your session is stale). Logout and log back in to get a new token and session.
If you want to view more information about a particular product or purchase it, you can click on the product which will open a product page with more information about your selected product.
If you want to purchase a product, add it to your cart by clicking the green ADD TO CART button
Once you are done looking and want to purchase the items in your cart, you can click the cart icon in the navigation bar, which will take you to the CART page.
On the cart page, you can increase and decrease the quantity of your products, or remove the products you don’t want in your cart anymore. In addition, you can use your loyalty points (our distinct feature) if you have any, in order to decrease your total. After you are done, click on the CHECKOUT button in the bottom which will take you to the checkout page.
Here you can input your credit card information and submit
Congratulations - Your order has been placed successfully.
In addition, you can also use and communicate with the chatbot in the bottom right of the page.
Finally, you can also virtually try on items - make sure to enable access to your camera when the browser prompts you for it. When your face is in focus, press the MODEL to spawn the sunglasses model. Press ADJUST to adjust your system with your mouse. IMPORTANT NOTE: There are some issues with the dependencies in the virtual try on feature. When you are done with try on, press the back button on the browser then reload the page, which will bring you back to the home page. (This is the safest way to do it).
The admin account credentials are (username: alvine, password: Alvine1!). With that account you can access the ADMIN VIEW where you can access the sales and application reports.
When using the application on the local machine, there is a chance that the pages will not scroll and that certain pages won't open. This is due to some issues with required dependencies and not our implementation. If this happens, please delete the contents of the frontend/node_modules/@lastcode802/glassarview/lib/components/GlassArView/index.css (do NOT delete the file, just its contents). Kill and restart the server using ctrl + C and npm start and the application should work as intended.
If npm install is giving errors, try using npm install --peer-legacy-deps, which should work without error and install all necessary dependencies.
If there are any other issues, don't hesitate to reach out to any of the group members.