Skip to content

Developer Guide

Jump to bottom
Manuel edited this page Oct 16, 2023 · 18 revisions

Development

We are editor and IDE agnostic in this project. You can use whatever editor or IDE you normally use. If you have not chosen a editor or IDE, we have Visual Studio and Visual Studio Code settings files included that will help you get going to work on this very easily.

Our stack is:

SQLite 3 Express 4 REACT 18.2 NodeJS latest LTS

The UI library is MUI v5

We use Jest, Cypress and REACT testing library for all unit, integration and e2e tests.

This app was bootstrapped with Create React App.

It is not hosted anywhere yet.

The development server runs at http://localhost:3000/

To start the app for development, cd to server and run npm start and wait for the server to start.

In another terminal, cd to client and run npm start and wait for the client to start.

Coding Style and Naming Conventions

TODO: add coding style conventions:

  • Think on current coding style conventions we've been following and add document them here.

TODO: add naming conventions:

Front-end naming conventions:

  • Components that are intended to be used as reusable component should be named as <[Custom]ComponentName> so a reusable Alert component should be named CustomAlert.
  • We name component files the same as the components they represent with an .jsx extension so CustomAlert.jsx.
  • We name CSS files the same as the component they belong to so the CSS file for the Post.jsx component would be Post.css.
  • We name CSS classes using the BEM naming convention in the following manner:
    • Componenent__inner-element: So that for the Post.css the rule styling the close button would be written as Post__close-button.

Back-end naming conventions:

  • Mention how database tables are named.
  • We name our database tables with singular and uppercase names: User, Post, Event, Friendship, etc.
  • We name our database table fields camelcased: date, title, locationName, imageUrl, etc.
  • We name our routers <[CRUD action of the router][modelName]Router> when importing them on server/app.js. A router to add a new user post would be named createPostRouter.
  • The exception is with Read actions instead of calling a router say readPostRouter to get all user's posts, it would be named getPostRouter so use get instead.
  • We create folders for different routes and give them model names: /users, /posts, /events, etc.
  • We names files <[CRUD action of the router][modelName]>.js so getPost.js or createPost.js or updatePost.js or deletePost.js.
  • We name endpoints /api/[modelName]/:id(if required) so for Event models CRUD actions endpoints /api/event/:id(if required) would be used.

End-to-end Tests naming conventions:

  • We name test files <[(functionality|component)to test][?-api].cy.js> so a test for Login functionality test file would be login.cy.js and a test for Post functionality would be post.cy.js but a test for Post API endpoints would be post-api.cy.js.

  • Test cases are named using the "should do X when input Y" naming convention. So "should login user when entering valid credentials" for example.

Clone this wiki locally