FJKT48 is a fan-made website dedicated to JKT48, created with cutting-edge web technologies for a seamless and interactive experience. Powered by Next.js, this project is a combination of performance, scalability, and developer-centric tools.
This project was scaffolded with Create Next Stack.
To start developing locally, run the following command:
| npm | pnpm | yarn | bun |
|---|---|---|---|
npm run dev |
pnpm run dev |
yarn dev |
bun dev |
Explore the full API documentation for the project here.
The table below lists all available npm scripts and their functionality:
| Script | Description |
|---|---|
dev |
Starts the Next.js development server. |
build:dev |
Builds the project using the development environment (.env.dev). |
build:prod |
Builds the project using the production environment (.env.prod). |
start:dev |
Starts the production server (built with build) in the development mode. |
start:prod |
Starts the production server (built with build) in the production mode. |
ngrok |
Launches ngrok for local tunneling on port 3000. |
test |
Runs all test cases. |
test:cover |
Generates test coverage reports. |
test:watch |
Watches for changes and re-runs tests. |
format |
Formats all source code with Prettier. |
format:check |
Checks if all source code adheres to the Prettier formatting rules. |
lint |
Lints all source code with ESLint. |
This project leverages the following technologies:
| Technology | Description & Resources |
|---|---|
| React | Website - Docs - GitHub |
| Next.js | Website - Docs - GitHub |
| TypeScript | Website - Docs - GitHub |
| Tailwind CSS | Website - Docs - GitHub |
| MongoDB | Website - Docs - GitHub |
| Supabase | Website - Docs - GitHub |
| Axios | Website - Docs - GitHub |
| Sonner | Website - Docs - GitHub |
| Radix UI | Website - Docs - GitHub |
| React Icons | Website - Docs - GitHub |
| Framer Motion | Website - Docs - GitHub |
| Prettier | Website - Docs - GitHub |
| ESLint | Website - Docs - GitHub |
- Interactive Design: Built with Tailwind CSS for rapid styling.
- Rich Animations: Smooth transitions using Framer Motion.
- Real-Time Updates: Integrated with MongoDB and Supabase for dynamic data fetching.
- Toast Notifications: Powered by Sonner for instant feedback.
- Iconography: Modern icons using React Icons.
- Robust API Integration: Fetch and manage data with Axios.
If you enjoy this project and would like to support further development, feel free to buy me a coffee. Your contributions are highly appreciated! ☕🎉