tlutz888 / hydra-code-prompt

Welcome to Thomas's hydra-code-prompt project!

To Run the project:

• Start the server following the instructions below
• cd client
• npm i
• npm start
• run tests with npm test

Process:

When given the project my process is as follows:

• Read through the instructions, docs, and API
• Ideate and draw a quick diagram of my design
  • Diagram
• Test some of the API calls on postman
• Bootstrap the app and build components along with tests
• Update the Readme

Design Decisions and Assumptions:

• Functionality: It isn't clear what we want this app to do. I chose to display a paginated list of all users in the database after login. Given the API, I could expand this to show objects belonging to each user and offer options for the logged in user to update their account and post objects of their own.
• Framework: The project uses React. Any modern framework (Vue, Angular, svelte, etc) would work as well for the scope of this project, but this is the framework that I am most familiar with.
• Routing: The project uses react-router-dom for client-side routing. This allows client-side routing and use of the browser's back/forward buttons while keeping the SPA experience without refreshing the page.
• Styling: The project uses styled-components for component-specific styling. This approach helps to keep styles encapsulated within the components and avoid global CSS conflicts.
• Authentication: The JWT token from the API is stored in localStorage. This is not ideal for a production app as it exposes the user to security risks such as cross-site scripting. I chose it for this app for simplicity and to allow sessions to persist across browser sessions.
• State management: The project uses React's built-in useState for state management. For a larger project, it would make sense to use react context or pull in an state management library such as Redux.

Running the example API

Install Node.js

If your system does not yet have Node.js installed, install it using one of the packages on the Node.js downloads page or the package manager of your choice (e.g. brew install node on macOS). Then, change directories to where this repository is checked out and proceed with the following steps.

Install packages

npm install

Generate seed data

npm run seed

This must be done prior to starting the server, but it only needs to be done once; generated data is saved to disk in the data folder and can be used by the server process indefinitely afterwards.

Note that changes made to saved state via server interactions are not saved back to the seed files. Each time the server is started, it will only have the original seed data.

Randomization of seed data is controlled by the RANDOM_SEED environment variable set in .env; re-running npm run seed with the same RANDOM_SEED value will generate the same output data.

Start server

npm run dev

The API server will start up by default on port 3000, as specified by the PORT environment variable in .env; this may be changed if another service is using that port number.

REST Reference Guide

You can find a reference describing the various endpoints available in the instructions/service-details.md file.