Clone of project for SMU project on web app development

by Vue.js Examples

is216-project

IS216 – Group 14 – WAD Kings

Stephanie Winata (stephaniew.2020@scis.smu.edu.sg),
Euan Chng Zhixiang (euanchng.2020@scis.smu.edu.sg),
Shubhasheesh Prakash (shubhashees.2020@scis.edu.smu.sg),
Eric Li (ericli.2020@scis.smu.edu.sg)

Project Overview

In this project, we aim to build a web-based one-stop portal for all anime lovers to get their dose of the best and trending anime. Users are offered a personalized list of anime based on their favourite genre. Adding an aspect of sociability, users are able to add friends and get a feed of their latest status. Much like twitter, users can post a short status update that will show up on their friend’s feed.

Login Page

Homepage

System architecture diagram

Figma

https://www.figma.com/file/sPpn3gklow7pJmC0jxApFQ/Anime-Nation?node-id=0%3A1

How to Install and Run Our Web Application (for Developers)

Instructions for Windows:

  1. Ensure that nodejs version 14.18.1 and npm version 6.14.15 is installed on the device.
    a. to check, run node -v and npm -v in the command terminal
    b. if node is not found, search windows for advanced systems settings –> environment variabless –> new , with name being nodejs and directory being where the nodejs folder is
  2. Navigate to the supreme-weebs-anime-app directory using the terminal, and from within that directory, run npm install inside the terminal
  3. Create a file in the supreme-weebs-anime-app directory called “.eslintrc.js” and paste the data from the following link https://pastebin.com/8iCxsmVw
  4. Run npm run serve to startup the app
  5. click on the localhost link to view the app

[OPTIONAL] How to Deploy Our Web Application (for Developers)

Instructions for windows:

  1. Ensure that nodejs version 14.18.1 and npm version 6.14.15 is installed on the device.
  2. run npm install inside the terminal
  3. Create a file in the supreme-weebs-anime-app directory called “.eslintrc.js” and paste the data from the following link https://pastebin.com/8iCxsmVw
  4. Create an account at firebase at https://firebase.google.com/ and remember your login credentials
  5. Select add new project and set a unique name
  6. run npm run build to build the app, which will create the dist folder
  7. run npm install -g firebase-tools
  8. run firebase login to log in to firebase. Select Y for usage and yes for other prompts
  9. initialize the firebase with firebase init and choose yes after that
  10. Select the Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys option
  11. after choosing hosting, select the existing project of
  12. The next step is to choose the dist folder that was generated from the npm build
  13. Follow these options for the next steps
    • What do you want to use as your public directory? dist
    • Configure as a single-page app (rewrite all urls to /index.html)? Yes
    • Set up automatic builds and deploys with GitHub? No
    • File dist/index.html already exists. Overwrite? No
  14. lastly, run firebase deploy, and the app will be deployed at the Hosting URL!

Deployed Site On Firebase

How to Use Our Web Application (for Visitors to our Website)

User registration and authentication (session management)
User profile (password, email, wishlist,favourites,genres)
The main homepage with a few main categories like trending, global top 50, all time favourites which users can also filter by genre. All the information and graphics needed is given by Jikan API.
Users can have a wishlist for shows they are going to watch (users will have 1 wishlist, but the wishlist will be sorted)
Users can see their friend’s top genre and get recommendations generated based on their preferred genres(this is generated from their wishlist,favourites,information gathered from registration)

Other Cool Things we did

X-Factors

  1. Jikan API
    a. API provides information about shows, and does not have daily lmits for number of calls that we can make. Can obtain various information about shows such as:
    i.Name of show
    ii. Review score on MAL
    iii. Genre of show
    iv. Rating for viewers
    v. Thumbnail image
    b. Users will be able to search by:
    i.Search by name
    ii. Search by genre
    iii. Search current top 50 shows
    iv. Search top 50 shows all time
  2. Using Vue-CLI for prototyping, and building of the app
  3. User authentication in firebase
  4. User information storage in firebase
  5. Deployment of app in firebase

GitHub

View Github