yunwi5 / code-like-pro

A practical web application for programmers where they create their own exercises, solve exercises from other programmers, and showcase their solutions.

CodeLikePro

About

A practice website for programming students where they create their own exercises, solve exercises from other programmers, and showcase their solutions.

We built a full stack web application with Next.js on the frontend and Express.js on the backend.

Deployed on Vercel https://code-like-pro-next.vercel.app/

Getting Started

Both frontend and backend require Node.js JavaScript runtime environment to run the application locally.
The application requires npm commands to set up and start, therefore, please make sure you have Node.js installed on your machine before starting the application.
Node.js version 16 is highly recommended even though other versions would also be fine. We mainly used Node.js version 16.17.0 for local development.

We recommend starting the backend server first and then the frontend, because the frontend has to consumre the APIs from the backend.
We recommend using VS Code editor for set up the development environment and view the content of the project.

Server

For the development mode on the backend server,

# From the project root directory, go to server directory
$ cd server
# Install the dependencies on /server/package.json
$ yarn install
$ yarn dev

Server runs on http://localhost:8080 on your computer by default.

Client

For the development mode on the client,

# From the project root directory, go to client directory
$ cd client
# Install the dependencies on /client/package.json
$ yarn install
$ yarn dev

Open http://localhost:3000 with your browser to see the client application.

Environment Variables Set Up

Client Environment Variables Requirements

We have two environment variables required for Next.js frontend application.
Please save following two variables in the frontend directory ./client/.env.local file.

• NEXT_PUBLIC_GOOGLE_CLIENT_ID - Google OAuth client ID (One you can create from Google Developer Console)
• NEXT_PUBLIC_SERVER_DOMAIN (optional) - Backend server domain (e.g. http://localhost:8080). The default value is http://localhost:8080 assuming you run the backend server locally.

Server Environment Variables Requirements

We have several environment variables for Express.js backend application.
Please save following environment variables in ./server/.env file for successful server set up.

• MongoDB Atlas - Connection to cloud database requires MONGO_USERNAME and MONGO_PASSWORD environment variables for a successful DB connection.
• Google OAuth - For google authentication, Google cloud requires client credentials GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET environment variables.
• Cloudinary - For image uploading, place cloudinary credentials CLOUDINARY_CLOUD_NAME, CLOUDINARY_KEY and CLOUDINARY_SECRET for cloudinary image uploading set up. The backend application still runs without these variables but cannot use image uploading functionality in that case.
• Jwt Authentication - For Jwt auth, you need the variable JWT_SECRET.

Testing

If you want to run the tests on the backend, the guidance is the following.

# From the project root directory, go to server directory
$ cd server
# Install the dependencies on /server/package.json if you haven't already
$ npm install
# Test command is npm test which will run all unit and e2e tests on the backend
$ npm test

We used Jest and Supertest for backend unit and e2e testing.

Usage Examples

Exercise Creation

• Users can create their own programming exercise with the above UI. User can specify exercise name, difficulty, language, prompt, solution code and test cases.

• User can run the test cases to check the output of their code before publishing it.
  

• User should write at least three test cases including at least one hidden tests before the publish. The solution code has to pass all test cases as well* . *( If these requirements are not met, the server will not allow this exercise to be published.

Exercise Browsing

• Users can browse the exercise with various search, sorting and filtering functionalities.
• When the user clicks one of the exercisees, they can start solving that particular exercise.

Exercise Attempt & Code Editor Workspace

• Users can solve the exercise by clicking the exercise they want to attempt. They can view the prompt, test cases, issue reports regarding the exercise, and submission history.
• Users can write the solution code in the coding workspace. They can run the code to run the test cases, and submit the code that would make an official submission history.
• Users can customize their code editor settings. They can set custom settings such as editor theme, editor type etc.

User Solution Showcasing

• Once the user solves the exercise, they can move on to the exercise showcase page. Users can showcase their solution so that other users can view.
• Users can upvote or downvote the existing showcase, and make comments to the showcase as well if there is anything to discuss further.

Global Forum Discussions

• Users can view the forum posts across 7 different categories such as algorithms, technologies, and interviews which are all related to computer science and software engineering.

• Users can view the post such as "Why use NextJs", they can like or dislike the post, and can make comments. Users can create their own software engineering related posts as well by clicking the New Post button.

User Profile

• Users can view their profile information and edit username, description and profile picture.
  
• They can also view the badges they obtained through their activities. As the user creates and solve more exercises and showcase more solutions, they gain more badges of higher prestige.

These are the key functionalities that our CodeLikepro application provides.
There are certainly other functionalities to introduce such as rankign system, profile statistics etc. However, we would not introduce all of them here so that the usage content does not get too long.

Project Management

Jira Board

We took an Agile approach with SCRUM framework. We used Jira board to run each sprint of two weeks interval, define product backlogs to achieve the goals we set up at the beginning of each sprint.

Jira roadmap

We used Jira roadmap as a Gantt chart to define the tasks for each sprint and track the progress. We defined main tasks for each feature, break it down into subtasks and allocate those tasks to each member for efficient task management.
Roadmap link

Link to Jira management tool

https://399team7.atlassian.net/jira/software/projects/JIAD/boards/1/roadmap

Technologies Used

This is the list of programming languages, frameworks and libraries we used for both frontend and backend.
For each dependency, we list human readable package name, followed by official npm package name and its version.

Frontend

Programming Language

1. TypeScript - typescript 4.6.3

Framework

1. Next.js - next 13.4.0

Libraries

1. React JS - react 18.0.0
2. TailwindCSS -tailwindcss 3.1.8
3. React Router - react-router-dom 6.3.0
4. React Query - @tanstack/react-query 4.2.3
5. Monaco Editor - monaco-editor 0.34.0
6. Quill Editor - react-quill 2.0.0
7. Chart JS - chart.js 3.9.1
8. Framer Motion - framer-motion 7.4.0
9. Redux Toolkit - @reduxjs/toolkit 1.8.5
10. React Icons - react-icons 4.4.0
11. Luxon - luxon 3.0.3
12. Sass - sass 1.54.5
13. Google OAuth - @react-oauth/google 0.5.1

The full dependencies of the frontend is available on /client/package.json file.
Please revise /client/package.json if you want to view the available scripts, full dependencies and dev dependencies.

Backend

Programming Language

1. Node JS (JavaScript) v16.17.0

Framework

1. Express JS - express 4.18.1

Libraries

1. Axios - axios 0.27.2
2. BcryptJs - bcryptjs 2.4.3
3. Mongoose ORM - mongoose 6.4.0
4. JWT - jsonwebtoken 9.0.0
5. Dotenv - dotenv 16.0.1
6. Cloudinary - cloudinary 1.32.0
7. Yup - yup 0.32.11

Testing Libraries

1. Jest - jest 29.1.2
2. Supertest - supertest 6.3.0

The full dependencies of the backend is available on /server/package.json file.
Please revise /server/package.json if you want to view the available scripts, full dependencies and dev dependencies.
Dependencies for testing libraries and nodemon which is the tool for the development server, are devDependencies.

Deployment

Frontend Deployment

We used Vercel for production deployment of our frontend React application.

Backend Deployment

We used Railway for production deployment of our backend Node Js application.

Acknowledgements

Special acknowledgement to our client Paul Denny who gave us an amazing project opportunity and constantly gave us great feedback.
Acknowledgement to Asma Shakil who gave us great feedback on our project throughout the semester.
Acknowledgement to Vercel that powers our frontend application.
Acknowledgement to Railway that powers our backend application.
Acknowledgement to everyone for having interests on our CodeLikePro capstone project.