Welcome to the Movie-Manage, a full-stack, lightweight, and simple movie application built using Next.js with both backend and frontend integrated seamlessly.
This project shows the power of Next.js and serves as a practical demonstration of using Next.js as a complete full-stack framework, incorporating authentication, dark mode, and local storage for data persistence.
- 🌟 Features
- 🚀 Live Deployment
- 📂 File Structure
- 📋 API Endpoints
- 🌐 Using the App
- 📝 Swagger API Documentation
- 💡 Notes
- 🧪 Testing
- 📝 License
- 📧 Contact
- Full-stack application with Next.js for both frontend and backend
- Full authentication system (Register and Login)
- User-specific Movie lists with graceful design
- CRUD operations for movie items
- Mysql database for data storage
- Responsive design
- Add, edit, delete movies
- State management using Zustand
- Localization with i18n(En, Fr)
- Form Validation with zod (email, password, movie title, pusblishing year)
- Simple pagination with no library
- API documentation using swagger
- A clean, modern, and responsive UI
- Basic testing for API endpoints and utility functions
- Easy-to-understand file structure and codebase
- Customizable with additional features and improvements
The application is deployed live on Vercel. You can access it at http://ec2-54-153-82-108.us-west-1.compute.amazonaws.com:3000/.
The app features a landing page, authentication (login, register), a movie list, and a Swagger API documentation page.
Below is the comprehensive file structure for the project:
movie-manage/
├─ app/ # Backend API endpoints
│ ├─ api/
│ │ ├─ auth/
│ │ │ ├─ register/
│ │ │ │ └─ route.ts # Registration route
│ │ │ └─ [...nextauth]/
│ │ │ └─ route.ts # Login route
│ │ ├─ movies/ # Full CRUD operations for movies
│ │ │ ├─ [id]/
│ │ │ │ └─ route.ts
│ │ │ └─ route.ts
│ │ └─ upload/ # File Upload route
│ │ └─ route.ts
│ ├─ docs/ # Swagger documentation page
│ │ ├─ layout.tsx
│ │ └─ page.tsx
│ ├─ [locale]/ # Page localization
│ │ ├─ auth/ # Authentication pages
│ │ │ ├─ login/
│ │ │ │ └─ page.tsx # Login page
│ │ │ └─ register/
│ │ │ └─ page.tsx # Register page
│ │ ├─ movies/ # Movie management pages
│ │ │ ├─ add/
│ │ │ │ └─ page.tsx
│ │ │ ├─ edit/
│ │ │ │ └─ [id]/
│ │ │ │ └─ page.tsx
│ │ │ ├─ empty/
│ │ │ │ └─ page.tsx
│ │ │ └─ page.tsx
│ │ └─ layout.tsx # Root Layout Component
│ ├─ favicon.ico
│ ├─ globals.css
│ └─ providers.tsx
├─ components/ # UI components
│ ├─ Moives/
│ │ └─ LanguageSwitcher.tsx # Language Switch bar
│ ├─ ui/
│ │ ├─ CustomizedCheckbox.tsx
│ │ ├─ fileupload.tsx
│ │ └─ ImageCard.tsx
│ └─ Footer.tsx
├─ hooks/
│ └─ useWindowResize.ts # Hook windows size event
├─ i18n/
│ ├─ request.ts
│ └─ routing.ts
├─ lib/ # User defined library
│ ├─ prisma.ts # Prisma config
│ ├─ swagger.ts # Swagger config
│ └─ zod.ts # Zod validation config
├─ messages/ # Messages for localization
│ ├─ en.json
│ └─ fr.json
├─ prisma/ # Prisma configuration dir
│ ├─ migrations/
│ └─ schema.prisma
├─ public/
│ ├─ uploads/
│ ├─ Vector1.svg
│ └─ Vector2.svg
├─ store/ # zustand stores
│ ├─ authStore.ts # Authentication state store
│ ├─ movieStore.ts # Moive management store
│ └─ useStore.ts # Mobile state store
├─ eslint.config.mjs # ESLint configuration
├─ middleware.tsx # API middleware
├─ next.config.ts # Next.js configuration
├─ package-lock.json # Locked versions of dependencies
├─ package.json # Project dependencies and scripts
├─ postcss.config.js # Postcss configuration
├─ README.md # This README file
├─ tailwind.config.ts # Tailwind CSS configuration
└─ tsconfig.json # TypeScript configuration
Here's a table listing all the API endpoints provided by this application:
| HTTP Method | Endpoint | Description |
|---|---|---|
POST |
/api/auth/login |
Log in with email and password |
POST |
/api/auth/register |
Register a new user |
GET |
/api/movies |
Fetch all movies for a user |
POST |
/api/movies |
Create a new movie item |
PUT |
/api/movies/{id} |
Update a movie item |
DELETE |
/api/movies/{id} |
Delete a movie item |
POST |
/api/upload |
Upload image file |
Follow this step-by-step guide to set up the project locally.
Ensure you have the following installed:
git clone https://github.com/monster0318/movie-manage.git
cd movie-manageIf you're using npm:
npm install --legacy-peer-deps # because swagger-jsdoc latest version is compatible with only react 18 not 19Or, if you're using Yarn:
yarn installCreate a .env.local file in the root directory if any environment variables are required. (Currently, the project doesn't use any external services that require environment variables).
Start the development server:
npm run devOr, if using Yarn:
yarn devThe application should now be running at http://localhost:3000.
To build the project for production, run:
npm run buildOr, if using Yarn:
yarn buildTo start the production server:
npm run startOr:
yarn startThe production build will be served at http://localhost:3000.
- Visit the Landing Page (
/): Introduces the app with the option to log in or register. - Authentication:
- Register: Create a new account via the
/auth/registerpage. - Login: Access your account through the
/auth/loginpage.
- Manage movies: Access the main movie list page (
/) where you can add, edit, and delete movies
Alternatively, you can directly access the deployed application at http://ec2-54-153-82-108.us-west-1.compute.amazonaws.com:3000/.
The application includes a Swagger API documentation page that lists all the available API endpoints and their descriptions. You can access the Swagger documentation at /docs.
For example: http://ec2-54-153-82-108.us-west-1.compute.amazonaws.com:3000/docs
- This application uses local storage to manage user data and movie items. For a more robust application, consider integrating a real database (e.g., Mysql, PostgreSQL).
This project includes a few basic tests for the API endpoints and utility functions. To run the tests, use the following command:
npm run testOr, if using Yarn:
yarn testThe tests will run and display the results in the terminal.
This project is licensed under the MIT License. See the LICENSE file for more information.
For any inquiries or feedback, feel free to reach out to the author at loyalman318@gmail.com.
Enjoy using the Movie-Manage! 🎉
Happy coding! 🚀