Competition Web App

A full-stack web application for hosting and participating in coding competitions, developed for a university project.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. GraphQL API
5. Roadmap
6. Contributing
7. License
8. Contact
9. Acknowledgments

About The Project

This project is a full-stack web application for hosting and participating in coding and hacking competitions. It was developed as part of the 10020 Internet Technologies module during a semester abroad at the University of the West of Scotland.

The application features a complete user authentication system, competition and submission management, and a role-based access control system for regular users, judges, and administrators.

Key Features:

• User Authentication: Secure user registration and login functionality.
• Competition Listings: View a list of active and past competitions.
• Submit Entries: Authenticated users can submit their entries for competitions.
• Rate Submissions: Judges have the ability to view and rate all submissions.
• Winner Announcements: A dedicated page to showcase the winners of competitions.
• GraphQL API: The backend is powered by a GraphQL API for efficient data fetching.

(back to top)

Built With

This project was built using a modern MERN-like stack, with Next.js for the frontend and a GraphQL API on the backend.

• 
• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Make sure you have the following software installed on your machine:

• Node.js (v16.10.0 recommended)
• npm

  npm install npm@latest -g

• A running MongoDB instance (local or cloud-based)

Installation

1. Clone the repo

   git clone https://github.com/dettinjo/competition-web-app.git
   cd competition-web-app

2. Install root NPM packages

   npm install

3. Install Backend NPM packages

   cd backend
   npm install

4. Install Frontend NPM packages

   cd ../frontend
   npm install

5. Configure backend environment variables. Open backend/nodemon.json and enter your MongoDB credentials:

   {
       "env": {
           "MONGO_USER": "your_mongo_user",
           "MONGO_PASSWORD": "your_mongo_password",
           "MONGO_DB": "your_database_name"
       }
   }

(back to top)

Usage

You can run the frontend and backend servers separately or use the concurrent script in the root directory.

• Run Backend Server (from the /backend directory):

  npm start

  The API will be available at http://localhost:4000.

• Run Frontend Development Server (from the /frontend directory):

  npm run dev

  Open http://localhost:3000 to view it in your browser.

• Run Both Concurrently (from the root directory):

  npm start

(back to top)

GraphQL API

The backend exposes a GraphQL API. When the server is running, you can explore the schema and test queries using the GraphQL Playground.

• GraphQL Playground URL: https://competition-web-app.herokuapp.com/playground

(back to top)

Roadmap

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the ISC License.

(back to top)

Contact

Joel Dettinger

Project Link: https://github.com/dettinjo/competition-web-app

(back to top)

Acknowledgments

• Choose an Open Source License
• Img Shields
• Font Awesome
• Best-README-Template

(back to top)