Style Guide

Styleguides

Git Commit Messages

• Use the present tense ("Add feature" not "Added feature")
• Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
• Limit the first line to 72 characters or less

JavaScript Styleguide

• All JavaScript must adhere to JavaScript Standard Style.
• All variables and functions must follow camelCase naming convention.

CSS and SCSS Styleguide

• All CSS and SCSS must adhere to BEM Naming Convention.

File Naming and Folder Structure

backend/
|   README.md
|   package.json
|   server.js                    <-- Entry point of express server
|___models/                      <-- For storing database Schemas
|   |   User.js                  <-- Capitalize first letter and keep singular tense
|   |   Chirp.js
|   |   ...
|___controllers/                 <-- Logic for server routes
|   |   auth.js                  <-- Logic for authentication
|___routes/                      <-- Server-side REST API routes for database interaction
|   |   index.js                 <-- Exports all API routes
|   |   auth.js                  <-- API routes specific to authentication
|   |   ...
|___validators/                  <-- Data validation checks go here
|   |   auth.js                  <-- Authentication data validation
|___middleware/                  <-- Custom express middleware (e.g. auth)
|   |   auth.js                  <-- Verify JWT on protected route
client/                          <-- Root folder of React
|   README.md
|   package.json                 <-- Dependencies and scripts (e.g. npm run start)
|___src/                         <-- Do not put client-side code outside of here
|   |   index.js                 <-- Entry point of React client
|   |   App.js
|   |   App.test.js
|___components/                  <-- Specific components that are unique
|   |   index.js                 <-- Exports all components
|   |___LoginForm/               <-- All components should be in their own folder
|   |   |   LoginForm.js
|   |   |   LoginForm.test.js
|   |   |   LoginForm.css        <-- Not always required. Can also be .scss (Sass)
|   |___common/                  <-- Common/Reusable components to reduce repeat code
|   |   |   index.js             <-- Exports all common components
|   |   |___Button/
|   |   |   |   Button.js
|   |   |   |   Button.test.js
|___pages/                       <-- Pages will be built with components (pieces of a puzzle)
|   |   index.js                 <-- Exports all pages
|   |   Layout.js                <-- Layout component to wrap each page
|   |___HomePage/
|   |   |   HomePage.js
|   |   |   HomePage.test.js
|   |   |   HomePage.css
|   |   ...
|___lib/                         <-- For client utility functions
|   |   withAuth.js              <-- Wrapper for private pages (e.g. ProfilePage.js)
|   |___api/
|   |   |   index.js
|   |   |   public.js            <-- Public client-side API requests