alexowen / example-react-project

Attention: this repository is unmaintained and incomplete. It is an example only and not for use anywhere important.

Example Code Test

This project was written for a code test using React and Loopback.

The brief was to create a React-based form with three fields, one of which gets data from the backend to populate it. The project should have an API and basic error checking/testing. There should also be a second page which shows all previous responses entered into the form.

It is a Loopback 4 back end with a create-react-app based front end. Please see the GitHub Issues for the improvements it needs.

Overview

This is a short form which requests details from a user, saves them to a database, and displays all the saved data.

Installation

This application requires:

• Node v13.11.0 (may work on older versions)
• npm or yarn
• MongoDB v4.2 (may work on older versions)

Install dependencies

npm install for both the front end and back end applications.

Usage

• Ensure MongoDB is running on localhost using the default port.
• To run the application, npm start from the back end folder and separately from the front end folder.
• The front end runs on port 3000, and the back end on 3001.

Note: The react application runs in debug/development mode.

Testing

npm test from either the front or back end folder.

Note: Back end testing is currently not present but can be manually tested using the Loopback explorer.

Deleting data

All data can be used by sending DELETE to http://localhost:3000/answers, or the same using the Loopback explorer at http://localhost:3001/explorer/#/AnswerController/AnswerController.deleteAll

Notes

• The front end is based on create-react-app and should behave exactly as expected.
• The back end is a Loopback API and follows normal conventions. The explorer can be accessed on http://localhost:3001/explorer/

Troubleshooting

Please email or call me if you have any issues, I have tried it several times and it works on my machine.

Suggestions/Improvements

Please refer to the GitHub Issues section for this project.

example-react-project's Issues

Improve the UX for the submit button to show what is incorrect/missing

The error handling on the front end is very basic.

Improve MongoDB connections

At the moment a new connection is opened per request, this could be improved with pooling/sharing.

Also, lots of code is duplicated.

Use a more structured API

This could be done well using Lambda, or at least a framework to generate both the skeleton and an OpenAPI/Swagger definition.

MongoDB connections do not close properly

This would be a pretty serious memory leak/bug in production.

Alter the email regex to require a '.' in the domain

The current regex is technically correct, but we don't want to allow email addresses without a .

Add testing via HTTP

Using chai-http - https://www.chaijs.com/plugins/chai-http/

Create a GitHub issue template

These issues are a mess, they should include steps to reproduce or a brief at least.

Use proper code guidelines

Possibly AirBnB's style guide - https://github.com/airbnb/javascript

Move the front end and API to separate repositories

If this were a commercial project, there would be at least two repositories.

Break form validation out into a separate file

The form validation is all in the route module at the moment. It would be useful to have it as a separate module and to remove some duplication.

Add a logging helper

Re-do CORS implementation

It is very insecure at the moment: it does not check whether the referrer is allowed.

Use Typescript for the API

Type checking would make the API more reliable and easier to test

Pass errors through to the front end/user

At the moment any error will fail silently and the user is not notified. The UX would be significantly improved if the user knew what the error was or which field has failed validation.

Check the shape and contents of items returned from the database

At the moment anything that comes from the database is returned directly to the client. There should be some checking here.

Allow users to create an external config file

Containing external ports, database port, etc.

More comprehensive back end testing, including stubbing the database

Split the API routes into separate files

The routes are grouped by function, but would be better if they had a separate file per route and method.

More comprehensive front end testing, including stubbing the back end

The front end testing is very basic

Proper JSDoc documentation

The documentation on the code is below what I would want to push to production, but the majority of it is hopefully straightforward enough it documents itself*.

*I know this isn't true.