Skip to content

LostArrows27/Aninagori

 
 

Repository files navigation

Contributors Forks Stargazers Issues MIT License LinkedIn


Logo

Aninagori

Share your favorite Animemory with friends!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Project Background
  3. Project Timeline
  4. Role in the Development Process
  5. Product Features
  6. Technical Highlights
  7. Build Run Deploy Instructions
  8. Contributing
  9. License
  10. Contact

About The Project

Aninagori is an innovative platform designed for anime enthusiasts to store and share their cherished moments in anime, as well as to discover new anime titles to watch. Our community welcomes everyone to join and explore the world of anime together.

Built With

  • TypeScript
  • TailwindCSS
  • SASS
  • CSS3
  • React
  • Next JS
  • Firebase

For more details, please refer to the Documentation

Project Background

"Anime" is a borrowed word from "Animation," meaning "animated film" in Japanese, mostly adapted from manga or light novel works. Anime has been around for a long time, but it has only recently gained significant attention and proven its allure through a series of blockbuster films with enormous revenues.

However, with the immense number of anime available today (~12,000 series), finding shows that align with individual preferences can become challenging. Additionally, the need to connect the anime-loving community together or create a social network where viewers can store and share memories of the anime they have watched or are currently watching with their friends has become more essential than ever before. That is the reason why we embarked on this project.

Project Timeline

We started the project in March 2023 and completed it within a span of 2 months.

Role in the Development Process

Throughout the project development, my role was that of a programmer and a key member of the project team. In this project, I took responsibility for the following functionalities:

  • Designing APIs related to user's Anime data.
  • Creating the user's profile page.
  • Implementing features for creating and editing posts.
  • Integrating user account linking with MyAnimeList, a third-party service.

Product Features

Aninagori includes the following main features

  1. Log in / Sign up by nickname + password or Google

Demo

  1. Viewing and interacting with other posts: commenting, reacting, and planning to watch anime related to the post.

Demo

  1. Posting: Adding images, videos, anime progress (watched episodes), additional information such as the date watched, number of views, etc.

Demo

  1. Connect / Synchronize user account with their MyAnimeList account.
  • User allow Aninagori to connect with their MyAnimeList account

image

  • After connect, their profile will include their basic information in MyAnimeList and can synchronize anime viewing data between two page.

image

  1. Chat with friend

image

  1. And for many other features like notification, settings, anime update shortcut, anime recommendation, ... please get more information at our Documentation_

Technical Highlights

Our product is built using React and Next.js (version 13), a powerful framework to create full-stack React web applications. This is some technical highlight in this project:

  • By using the API route feature in Next.js 13, we were able to create an entire Anime API system without set up a Back-end server
  • Complete API Route System that allow us to interact with the third parties website like MyAnimeList: get anime information, get user information, update user detail, get user account token and refresh token to access the API.
  • Using Next.js 13 gives us the option to optimize rendering on the server with Static and Dynamic Rendering so that the loading time and redirect between each page will be faster for user
  • By using Firestore Database - a NoSQl database, which allows us to store and synchronize data in real-time between clients and the server. Its real-time capabilities enable seamless and instantaneous data updates, making it ideal for applications that require live data synchronization.
  • Recommendation System: we have built a system that can create an user feed and anime recommendation list that based on their anime watch history and interaction with other post

Build Run Deploy Instructions

You can clone this project and follow these steps

  1. Clone the repository to your local machine.
  2. Install the dependencies using the command: npm install.
  3. Set up some file and enviroment variables (for more detail, please view the "5.1. Cài đặt hệ thống" part in our Documentation
  4. Run the application on your computer using an emulator or on a mobile device with the command: npm start.

For deployment, we deploy using vercel by linking directly to our github project and let Firebase hold our database. You can view the demo website at https://aninagori.vercel.app/

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Stix Helix Team:

Project Link: https://github.com/LostArrows27/Aninagori

(back to top)

About

Share your favorite Animemory with friends!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 87.0%
  • JavaScript 6.4%
  • SCSS 5.7%
  • CSS 0.9%