Development Setup

Welcome to Development Setup!

If you are reading this you are ready to contribute to c0d3.com!

To begin we will need to set up the code base on your own machine. To do this we will be creating a copy of the c0d3 GitHub repository.

Prerequisites

• Yarn -- Package manager for node, this codebase uses this instead of npm
• Node -- An application that runs javascript
• Docker -- Runs applications (Postgres, Node, etc) in containers, for example our Postgres database is run in a container using Docker
• Docker-compose -- Runs applications (Postgres, Node, etc) in containers based off the docker-compose.yaml file. Sample yaml file Yaml File

Instructions

Forking and cloning the repository

1. Click on the button in the top right corner with the text Fork to create a copy of this repository.

2. After forking you will be redirected to your fork repository page. Click on the "Code" green button and copy the ssh or https url.

3. Navigate to your terminal and clone git clone *url-goes-here*.

4. After cloning, you will want to change the current directory to the c0d3-app folder that was created with cd c0d3-app.

Setting up the project

1. Run yarn install to install all of the dependencies needed to run the app.

• If it failed with The engine "node" is incompatible with this module run it with yarn install --ignore-engines (special case for nextAuth package)

2. Copy and rename the .env.example file to .env in your c0d3-app directory (on Linux and macOS this can be done with cp .env.example .env). That file already contains the correct database environment variables for the docker container we use for development. Port numbers are completely arbitrary, as long as docker-compose.yml is consistent with this .env file you're good. Never commit the .env file as it may contain secret API keys.

3. Now you can start the docker containers with yarn db:up. It will take some time for docker to pull and install everything, but in the end, you will have a PostgreSQL container up and running. To stop all containers run yarn db:down, and to delete all the container data you can use yarn db:down -v.

   If you get an error like PermissionError using yarn db:up, you may need to open the package.json file. Inside the fil,e you will need to add sudo into the yarn db:up command like this "db:up": "sudo docker-compose ..."

4. Now run yarn db:init to create the development database with fake data, needed to run the app. yarn db:init uses prisma migrations and seedData to initialize the development database. Here is the link to the prisma folder Prisma. When prompted to reset the database just confirm by pressing y.

Start the app

Start the app by running yarn dev. If everything went right you will see the landing page running at http://localhost:3000. To run on a different port (3010) you can do PORT=3010 yarn dev.

There are three pre-made users:

• admin:password (admin, passed all lessons, can review submissions)
• leetcoder:password (passed all lessons, has a submission for each challenge, gave stars for admin user)
• newbie:password (fresh new user).

To submit challenges through the c0d3 cli:

1. Logout c0d3 logout.
2. Login to your local server c0d3 login --url http://localhost:3000/api/graphql.
3. Submit your code c0d3 submit --url http://localhost:3000/api/graphql It should be visible on your local setup.

To connect to postgres database inside container:

1. Open bash console inside postgres container docker exec -it c0d3_db /bin/bash.
2. Connect to postgres psql -U c0d3_admin -d c0d3.

To explore and manipulate the data in Prisma:

• Run npx prisma studio

If you have psql installed locally you can type psql -U c0d3_admin -h localhost -p 5432 -d c0d3 with the same result.

There are also various useful graphical database management tools like pgAdmin and dBeaver.

package.json scripts

• db:init: initializes the database, clears tables if they exist, runs all Prisma migrations, and seeds with fake data.
• db:seed: only seeds the database with the fake data.
• db:up: shortcut to start the Postgres docker container.
• db:down: shortcut to stop the Postgres docker container.
• dev: starts the Next.js dev server.
• build: runs Next.js builder.
• start: starts the Next.js prod server, requires running build before it.
• lint: checks the project for linting errors.
• lint:fix: same as lint but also applies automatic fixes.
• autofix: same as lint:fix but also applies SVG optimization.
• storybook: starts the storybook server.
• build-storybook: build storybook components.
• test: runs the testing suites and calculates the coverage.
• ts-node: used to run typescript files in the cli.
• type-check: runs the typescript compiler to check for type errors.
• generate: generates the graphql/index.tsx file from the graphql schema.
• postinstall: runs automatically after yarn install, used to generate the local Prisma client.
• prepare: runs automatically after yarn install, used to set the git hooks with husky.
• vercel-build: used only when deploying on Vercel, custom build command for deployment.

Development Goodies - Extensions

React Developer Tools: It allows you to inspect the React component hierarchies in the Chrome or Firefox Developer Tools.

Known problems

Encountered an issue? Check the Troubleshooting page

---

You are now all set up on your machine! Keep up the great work and thank you for your contributions

👍