Competition Web App

Project Overview

The Competition Web App is a comprehensive platform built from the ground up to manage online coding or hacking competitions. It provides a seamless experience for participants to submit their work, for judges to review and rate entries, and for administrators to manage the entire ecosystem. This project was conceived and developed as a university assignment, demonstrating a full-stack skill set by integrating a modern frontend, a robust backend API, and containerized deployment.

The Challenge

The primary challenge was to design and implement a secure, multi-user application with distinct roles and permissions. This required creating a resilient backend capable of handling authentication, data relationships (users, competitions, submissions), and business logic, while also building an intuitive and responsive user interface for interaction. A key goal was to containerize the entire stack to ensure consistent and reproducible development and deployment environments.

Key Features

• Role-Based Access Control: Distinct user roles (USER, JUDGE, ADMIN) with different permissions and views.
• User Authentication: Secure user registration and login using JWT (JSON Web Tokens) for session management and bcryptjs for password hashing.
• Competition Management: Administrators can create, update, and manage competition details.
• Submission System: Authenticated users can submit their entries to active competitions.
• Rating and Judging: Judges have access to a dedicated portal to view and rate all submissions for a competition.
• Dynamic Frontend: A responsive and interactive user interface built with Next.js and Material-UI.

Technical Deep Dive

Frontend:

• Framework: Built with Next.js for its powerful features like server-side rendering and static site generation, providing a fast and SEO-friendly user experience.
• UI Library: Utilized Material-UI (MUI) for a clean, modern, and responsive design system with a comprehensive set of pre-built components.
• GraphQL Client: Apollo Client was used for managing data fetching, caching, and state management, seamlessly integrating with the backend GraphQL API.
• State Management: Leveraged React Context API for managing global state such as user authentication status and details across the application.

Backend:

• Runtime & Framework: Developed on Node.js with the Express.js framework to create a robust and scalable server.
• API Layer: Implemented a GraphQL API using express-graphql to provide a flexible and efficient data querying language for the frontend, avoiding over-fetching of data.
• Database: Utilized MongoDB as the NoSQL database, with Mongoose as the Object Data Modeling (ODM) library to define schemas and manage relationships between competitions, users, and submissions.
• Authentication: Secured the API using a token-based authentication system with JSON Web Tokens (JWT).

DevOps/Deployment:

• Containerization: The entire application stack, including the frontend, backend, and a MongoDB database instance, is containerized using Docker and orchestrated with Docker Compose. This ensures a consistent, isolated, and easily reproducible environment for both development and deployment.
• Deployment: The application is configured for deployment on platforms like Heroku, as indicated by the Procfile and heroku-postbuild scripts.

Personal Learnings

This project was a significant learning experience in full-stack development. Key takeaways include designing a GraphQL schema from scratch, implementing a secure, role-based authentication system with JWT, and orchestrating a multi-service application using Docker Compose. It reinforced the importance of separating concerns between the client and server and the power of containerization in simplifying complex development environments.