This repository serves as a comprehensive full-stack event management system built with Next.js, featuring NextAuth.js for authentication, and utilizing both TypeScript and JavaScript. The project demonstrates a seamless integration of modern web development practices, including authentication, CRUD operations, and admin account functionalities.
Features Authentication: Users can register and log in with Google authentication via NextAuth.js. Secure authentication workflows ensure a reliable user experience. Event Management: Fully functional CRUD operations for managing user events. Differentiated access for regular users and admin accounts. Frontend and Backend: Both frontend and backend are built with Next.js, leveraging its server-side capabilities. Styling: Designed with Tailwind CSS, ensuring responsive and modern UI components. Code Formatting: Utilizes Prettier for consistent code style and formatting across the project. Deployment: Deployed on Vercel with a CI/CD pipeline, ensuring smooth updates and streamlined deployment. TypeScript and JavaScript: A mix of TypeScript and JavaScript to demonstrate flexibility in development.
Clear Structure: The project is structured with clarity, making it easy to navigate and extend. Technologies Used
Frontend: Next.js: React-based framework for building web applications. Tailwind CSS: Utility-first CSS framework for rapid UI development. Authentication:
NextAuth.js: For Google-based user authentication and session management. Backend: Next.js API Routes for handling server-side logic and CRUD operations.
Database: Example integration with Prisma for database management (can be extended as needed). Deployment: Vercel: Hosting platform with built-in CI/CD capabilities.
Code Quality: Prettier: Code formatter for consistent styling.
Setup Instructions
Clone the Repository:
bash Copy code git clone https://github.com/your-repository-url.git cd your-repository-name Install Dependencies:
bash Copy code npm install Environment Variables:
Create a .env file in the root directory and configure your environment variables: env Copy code DATABASE_URL=your_database_url NEXTAUTH_URL=your_vercel_url GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret Run the Application Locally:
bash Copy code npm run dev Access the application at http://localhost:3000.
Deploy to Vercel:
Connect your repository to Vercel. Add the necessary environment variables in the Vercel dashboard. Deploy your project with a single click! How It Works Authentication: Users can log in with their Google accounts, thanks to the NextAuth.js integration. Event Management: Users can create, update, delete, and view events. Admins have additional privileges for managing all users and events. CI/CD Workflow: Every push to the repository automatically triggers a build and deployment process on Vercel. File Structure plaintext
Copy code ├── components/ # Reusable UI components ├── pages/ # Next.js pages │ ├── api/ # API routes for server-side logic │ ├── auth/ # NextAuth.js authentication pages ├── public/ # Static assets ├── styles/ # Tailwind CSS styles ├── utils/ # Helper functions and utilities ├── prisma/ # Prisma schema (if applicable) ├── .prettierrc # Prettier configuration ├── next.config.js # Next.js configuration ├── package.json # Project dependencies and scripts
Future Improvements Add more authentication providers (e.g., Facebook, GitHub). Enhance the admin dashboard with analytics and user statistics. Extend database integrations for complex event relationships. Introduce testing frameworks like Jest for automated testing. Contributing Contributions are welcome! Please fork the repository and submit a pull request for any improvements or features you’d like to add.
License This project is licensed under the MIT License. See the LICENSE file for details.