/ghiblimarathon

Primary LanguageTypeScript

🏃‍♂️ Ghibli Marathon

This is a Next.js project that showcases the movies of Studio Ghibli. Users can view the list of Studio Ghibli movies, track their progress, share their progress, share thoughts on each movie, and challenge others to join the marathon. This project uses Kinde Auth for authentication and MongoDB as the database.

Features

  • 🎬 Track Your Progress

    • Easily set the status of each movie—complete, watching, or on hold. Stay organized and see where you left off in your marathon.

  • 💬 Share Your Progress

    • Share your profile with others to show how much you've completed. Let friends and fellow fans see your journey through the Studio Ghibli films.

  • 📝 Share Thoughts

    • Post and share your thoughts on each movie. Leave comments and engage with others under each film.

  • 🎉 Challenge Others

    • Invite friends and challenge them to join the marathon. Compare progress and enjoy the magical journey together.

Technolgy

  • Next.js: used for building the project.
  • Tailwind CSS:used for styling the project.
  • MongoDB: used for storing and querying data.
  • prisma: used for interacting with the database.
  • kinde-auth: used for user authentication.
  • react-rough-notation:used for adding notes to the project.
  • react-link-preview: used for displaying link previews in the project.
  • Shadcn-ui: used for creating UI components.
  • Aceternity: used for creating UI components.

Tools

  • VS Code: The code editor used for this project.
  • Git: The version control system used for this project.
  • GitHub: The hosting service used for this project.
  • Vercel: The deployment platform used for this project.

Getting Started

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.