React Template App

This app is meant to serve as the basis for my future React apps. It has my preferred technologies, testing frameworks, and project structure pre-configured so that I don't have to set up the same boilerplate with every project. If you're curious about my opinions and preferences when it comes to frontend development, this is a great place to look!

To Copy*:

0. Clone this project if it is not already on your machine.
1. When you want to create a new app based on this template, create a new directory for the project with mkdir [new-project-name-here]
2. Copy/paste this repo's files & folders into the new directory.
   • Make sure you copy the hidden .eslintrc.js and .gitignore files. (Display these in Finder by hitting Command + Shift + . ) However, you probably don't want to copy the .git or node_modules/ directories.
3. Install packages with npm i
4. Confirm everything is working as expected by running npm run test
5. Setup the new project's git repo with git init
   • At this point, if you don't want to commit a bunch of CHANGE_ME variable names, you should change these values. See "To Customize" below.
6. Create an initial commit with git add . && git commit -m "Initial commit from template app".
7. Create a new remote repository for the app on your preferred host (GitHub, Bitbucket, etc.)
8. Add the remote origin with git remote add origin [url-provided-by-repo]
9. Commit to remote with git push -u origin main
10. Begin development!

^{*If these instructions seem overly specific, it's because I don't trust my own memory--not because I don't trust your capabilities. I've been burned one too many times by telling myself "Surely I'll remember how to do this forever!" As a result I lean toward excess specificity in things like this, just in case.}

To Customize:

There are several fields which will be different for every app, like site title, footer copyright owner, site icon, etc. Find these by searching for CHANGE_ME across the entire app directory, including file names. Change these fields/files.

To Develop:

• Install packages: npm i
• Start app: npm start
• Start app in background using pm2: npm run start-background
• Kill background app process: npm run kill-background
• Run all tests (lint, unit, and integration/visual): npm run test
• Run unit tests: npm run jest
• Run lint: npm run lint
• Open integration/visual tests: npm run cypress:open

Project Structure

The app's JSX files are categorized into pages and components. Redux actions and reducers are housed in their own directories as well. The app's overall styles are set in index.scss and its style constants are defined in globals.scss. Each .scss file should import globals.scss. Linter preferences are defined in .eslintrc.js and unit test setup is performed in setupTests.js. Cypress tests are configured in their own top-level directory.

Technologies

0. UI Framework: React (using Create React App)
1. State Manager: Redux
2. Package Manager: NPM
3. Routing: React-Router-Dom
4. CSS Processor: SASS

Testing Frameworks

0. Unit Tests: Jest/Enzyme
1. Linter: ESLint
2. Visual Regression Tests: cypress-visual-regression
3. Integration Tests: Cypress