Building Code Competition Portal Website in Next JS - Part # 00

Building Code Competition Portal Website in Next JS - Part # 00

ยท

3 min read

Hello,

Welcome to another series. This series is about making a code competition portal website as a part of a side project.

This article is all about the planning of that project. After planning, we will move on to design and then finally coding the website and then DEPLOYING it.

What this project is about?

This project is a code competition portal website. You can call it a Hackerrank clone but it's not exactly a clone.

It will be a website that will be used to host coding competitions/interviews. If you ever participate in a coding competition then you will be given a website where you will log in with your credentials and that website will have several problems with some sort of description and examples to understand the problem. Then you have to solve that problem using your preferred programming language. The person that will solve all problems or more problems correctly will eventually win the competition.

Main Idea of Project:

A website where a student will log in, see several problems, pick one of the problems, see description and test cases of that problem, write code in his preferred language and submit the problem. This process repeats for other problems. That's the idea of our project.

Why I am making this project?

Two reasons why I am making this project:

  • I haven't tried this project before & I want to build this project on my own so that's why ๐Ÿ˜

  • I can use this project If I will be allowed to host a coding competition at my University or anywhere ๐Ÿ‘€

Tech Stack:

I will build this project with the following technologies:

  • Next JS

  • Tailwind CSS

  • TypeScript (Maybe)

  • MongoDB

  • Git

  • Vercel (For Deployment)

Why Next JS over DJANGO?

Now I can choose DJANGO for this project but I will choose Next JS because of two reasons:

  • I am new to NEXT JS & want to practice what I have learned

  • I want to practice NEXT JS as I have a web competition ahead & I want to practice for that competition

I know that I haven't practiced DJANGO for a while now but I will build another project with DJANGO in the future as there are many projects ahead โœŒ

Features:

Now let's talk about the features of this project. You can say these are tentative features and I can add or remove features from the list.

  • Login Authentication

  • Signup (Will only be done by admin)

  • Adding problems for the user in the database

  • Adding a code editor on the website

  • Test the code against some input data (I need to search about this thing)

  • Submit the final code

  • A mechanism to auto-test the code or have to check all code files manually

  • Leadership Board

That's it for this post. Now, We will start with the next steps from the next articles.

Share this post with your programming friends.

See you in the next one :-)

ย