Giter Club home page Giter Club logo

mainichi's Introduction

Mainichi

About and Inspiration

There's so much good anime that gets released every season nowadays. It's difficult to keep up when someone has so much going on in real life. When it comes to sit down and finally relax and watch some anime. You scroll forever with all the new releases! Mainichi is a way to track all the new anime in the current season. I wanted this to only focus on the current season. Once the current season is finished, the page gets updated.

2023-11-22.02-02-48.mp4

Tech Stack

I bootstrapped this project with the create-t3-app. I didn't use everything included with the T3 Stack but it's easy to get started and get all the goodies like NextJS, Typescript and TailwindCSS.

Built with:

Next JS TypeScript TailwindCSS Firebase

Features

  • List of Current Season Anime thanks to the JikanAPI
  • Auth taken care of with Firebase.
  • Users and Users watchlist is saved in Firestore
  • UI with TailwindCSS and Components with Shadcn

Would like to do

  • User profiles: Since web page is focused on current anime. Having a list of favorites from the past seasons is almost like a sign from when users joined.

mainichi's People

Contributors

donovangg avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

mainichi's Issues

React Minified Errors in Prod

React minified errors in the console in Prod but not in development:
People have had problems with this with date-fns (which is in the project), dayJS, and even just the Date JavaScript Object.
Link to a discussion on Vercel's GitHub. This may also just be a React error not a Next Error.

image

Too many network requests.

Network requests for a little bit better after #34 with prefetching disabled, but it's still a lot. (sends a network request hovering over the button). Error handle with a too many frequent requests at least or a timeout on fetching anime data.

Error Type Invalid with Headless UI dropdown rendered only

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. headless ui

Only happens with the Headless UI Dropdown. Pasted from docs.

signUpWithGoogle initializes a new array

signupWithGoogle initializes a blank savedAnime array. This results in the users savedAnime array going away when they logout. I think I can do two different things.

  • One two add a Login and Signup. Problem is that to authenticating with google is the universal signupwithGoogle. Check if the user has something in a saved anime array. if not create it, if they do don't init it.
  • Use the user credential property to check.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.