Ani-Planet

To see site, click: Here)

Full Demo

Deployable

Showcase

Getting Started

1. Clone the repo from github

2. (OPTIONAL) To see the repository for the data, click HERE

3. Cd into the directory from your terminal and install the project dependencies:

• Run npm install or npm i in the terminal

3. To see the web app:

• Run npm start in the terminal
• Press ctrl/cmd + c to exit

4. Copy the local host address from your terminal and add to your web browser to see the web app

Table of Contents

• About the Project
• Contributors
• Technologies Used
• Instructions on Use
• Demo of Features
• Testing the app
• Challenges and Wins
• Project Overview and Goals
• Future Additions

About the Project

Love anime but don't know what to watch? Use this app to see what the best anime out there are. You can scroll through our list of anime and check their ratings. Love a specific genre or know what you want? Filter our list by genre, see what is popular, or even search it with our live responsive search bar.

This was part of Turing School of Software & Design module 3 showcase project.

Contributors

• Nicholas Ao

Technologies Used

• React
• Javascript
• Express
• HTML
• CSS
• Webkit
• React Router for client-side routing
• Cypress End-to-End Testing

Instructions on Use

Search for a specific Anime To search for a specific Anime, users can click in the input field and type in a title of the anime. The homepage will change based on a user's input.

Add a Anime to Watchlist To add an Anime to a user's watchlist, users can click on the 'Add Anime to Watchlist' button. Users will be notified that the anime is in their watchlist when added.

View all Anime in Watchlist To view anime in a user's watchlist, users can click on the 'My List' area in the navigation bar. This will take them to a new page to view the anime that they have added.

Remove Anime from Watchlist To remove an anime from a user's watchlist, users can click on the 'Remove from your Watchlist' button.

Filter Anime by Genre To filter anime by genre, users can hover over the 'Genre' area and choose from seven different genres.

Filter Anime by Popularity To filter anime by popularity, users can click on the 'Popular' section located in the navigation bar and the anime will be sorted by user ratings.

Demo of Features

Homepage

Search for a specific Anime

Add a Anime to Watchlist

View all Anime in Watchlist

Remove Anime from Watchlist

Filter Anime by Genre

Filter Anime by Popularity

Testing the App

End-to-end testing was implimented to test the application by using Cypress. Stubbing and intercepting was used to control the network response. The app was fully tested based on the user story from start to finish.

Challenges and Wins

Challenges

• Asynchronous timing was a challenge.
• Making sure a anime would live update based on if it was in a user's watch list was challenging
• Building the backend was challenging because I have never used Express before.
• Making sure I was stubbing the responses when using cypress was a bit of a learning curve.

Wins

• Created my first backend server using express.
• Making sure everything live updates
• Implement a DELETE request

Project Overview And Goals

• Use OOP to drive the design of the application and the code
• Gain competency with React fundamentals
• Implement asynchronous JavaScript
• Implement Router
• e2e testing with Cypress
• Use Express to build backend server

Future Additions

• Have users be able to leave a review about an anime
• Add an anime description page where users can see an anime's details by clicking on a anime card at the homescreen
• Add a larger database