Next.js v13 Practice

OVERVIEW

• This document outlines a comprehensive plan for practicing Next.js v13. The objective of this practice is to develop an online music streaming web application that enables users to play songs from available albums.

TIMELINE

• Estimate time: 12 days (2023/08/28 - 2023/09/14)
• Actual time: 12 days (2023/08/28 - 2023/09/14)

TEAM SIZE

• 1 developer:
  • Van Tran

TARGETS

• Apply Routes
• Apply Data Fetching
• Apply Caching
• Apply Rendering
  • Server Components
  • Client Components
• File Conventions

TECHNICAL STACK

• Next.js (version 13)
• React
• TypeScript
• SWR
• Tailwind CSS
• ESLint
• Deploy environment:
  • Vercel: (Vercel's frontend cloud gives developers frameworks, workflows, and infrastructure to build a faster, more personalized web)
  • Render (Render is a unified cloud to build and run all your apps and websites with free TLS certificates, a global CDN, DDoS protection, private networks, and auto deploys from Git):
    • Server: Strapi (Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.)
    • Database: Cloudinary (Streamline media management and improve user experience by automatically delivering images and videos, enhanced and optimized for every user.)

REQUIREMENT DETAILS

• Read more detail requirement in here.

DESIGN

• Figma

TASK MANAGEMENT

• Trello

TEXT EDITOR

• Visual studio code

DIRECTORY STRUCTURE

├── node_modules
├── public
└── src
    ├── app
    │   ├── albums/[id]
    │   ├── api/revalidate
    │   ├── collection
    │   └── home
    ├── components
    │   ├── AlbumCard
    │   ├── AlbumInfo
    │   ├── Banner
    │   ├── Button
    │   ├── CollectionCards
    │   ├── Loading
    │   ├── MessagePopup
    │   ├── MusicController
    │   ├── Navigation
    │   ├── RowCards
    │   ├── Song
    │   └── Typography
    ├── constants
    ├── hooks
    ├── models
    ├── services
    ├── types
    └── utils

GET STARTED

• Clone project:

  $ git clone [email protected]:van.tran/react-training.git

• Checkout branch:

  $ git checkout next.js-13-practice

• Install packages:

  $ pnpm i

• Start project

  $ pnpm dev

• Open browser and and type http://localhost:3000 in address bar

DEPLOYMENT

• https://musica-app-topaz.vercel.app

GOOD TO APPLY

• million.dev<For /> and block()
• OG Image Generation Vercel
• Use library to handle music player