Contributing to CMIMC Problem Proposals

This project is a web app for organizing problem proposals for the Carnegie Mellon Informatics and Mathematics Competition.

Development

This project runs on a Node JS server and a MySQL database and serves a frontend based on React and Redux.

Setup

• Install vendor dependencies for the project via npm install.

• Set up the database. In a MySQL terminal on root@localhost opened from the root directory of the project, run the following commands:

  • create database cmimcdb;
  • use cmimcdb;
  • source ./sql/mktables.sql;

• Set environmental variables. We need the MySQL localhost password in MYSQL_PASSWORD and a JWT secret key to sign with in JWT_SECRET, so set them to appropriate values with export.

• Watch for transpiling and packing the React and Redux code for development via npm run watch.

• Run the development server with npm run dev. The website will be hosted at http://localhost:8000.

Project Structure

Server

The main Node JS server is index.js. The various routes handled by the server are in routes/, organized by feature. Configuration of the JWT authorization, MySQL database connection, and socket.io connection are contained in config/. Other miscellaneous utilities are contained in utils/.

Frontend

All files that the server sends are contained in public, including all the transpiled Javascript. The React and Redux source files are contained in the src/ directory. Within src/, index.js serves as the main entrypoint for the React and Redux app. The actions/, reducers/, configureStore.js handle the Redux structure and components contains all the React components, both presentational and container.

Reading for Beginners

The frontend logic is rather involved if you aren't familiar with React and Redux. To learn the basics of React, the official documentation tutorial is very nice. A lot of React Router tutorials are outdated, so use this one to get a feel for the new React Router. The official documentation tutorial for is great for Redux. For a more comprehensive explanation that is very close in structure to this project, see this tutorial (but the React Router usage isn't updated).