imvanzen / carrot-events

Simple event manager

The Carrot Events App

Made with 💕 for Brainhub

Introduction

At the beginning of October, I started the interview process with the software house named Brainhub. They are based in the city of Gliwice so it's my area. The position I am applying for is the Full stack software developer. They send me the following task and they gave me one week to solve it. This is my attempt.

Description

In the beginning, we want you to create a simple app with frontend implemented in React and connected with a simple API written in Node.js with data saved in DB (e.g., MongoDB, PostgreSQL, SQLite, MySQL).

The application should allow a user to add an event to the database, with the following fields:

• First name (required)
• Last name (required)
• Email (required, valid email address)
• Event date (required, simple date picker)

What's essential for us?:

• Tests for frontend and backend
• Data validation on frontend and backend
• Error handling
• State management on frontend (form and request lifecycle state)
• Readme with all information needed to install and run the app, run tests
• Catalogs and components structure
• Code readability and extensibility

If you have any questions, don't be afraid to ask. Good luck!

How to run

Development with containers

• You will need docker and docker-compose
• Clone the repository

  $ git clone [email protected]:imvanzen/carrot-events.git 
  

• Ensure you are in the main directory

  $ /path-in-your-fs/carrot-events
  

• Run script

  $ npm run docker:dev
  

• Keep your fingers crossed with me that the containers will build and start up.
• Website is running on port 3000 and backend on port 5000
• Rebuild containers after any change (service_name: web | server)

  $ npm run docker:dev --build <service_name>
  

Development with hotrealoading

• You will need docker and docker-compose
• Clone the repository

  $ git clone [email protected]:imvanzen/carrot-events.git 
  

• Ensure you are in the main directory

  $ /path-in-your-fs/carrot-events/
  

• Run script in order to setup database

  $ npm run docker:dev postgres
  

• Keep your fingers crossed with me that the containers will build and start up.
• Postgres is running
• Ensure you are in the web directory

  $ /path-in-your-fs/carrot-events/web/
  

• Run script in order to setup database

  $ npm run start
  

• Ensure you are in the web directory

  $ /path-in-your-fs/carrot-events/server/
  

• Run script in order to setup database

  $ npm run dev
  

E2E Tests

• You will need docker and docker-compose
• Clone the repository

  $ git clone [email protected]:imvanzen/carrot-events.git 
  

• Ensure you are in the main directory

  $ /path-in-your-fs/carrot-events/
  

• Run script in order to setup database

  $ npm run docker:test
  

• Keep your fingers crossed with me that the containers will build and start up.
• Website is running on port 3000 and backend on port 5000
• Ensure you are in the web directory

  $ /path-in-your-fs/carrot-events/web/
  

• Run script in order to setup database

  $ npm run cypress:open
  

• Enjoy interactive E2E tests

Exclusive API tests

• Ensure you are in the main directory

  $ /path-in-your-fs/carrot-events/
  

• Ensure you have testing postgres DB runnning. Othrewise run this command

  $ npm run docker:test
  

• Ensure you are in the server directory

  $ /path-in-your-fs/carrot-events/server/
  

• Run script in order to setup database

  $ npm run test
  

• Enjoy API tests

Milestones

• Setup Containers
  • Database
  • Server
  • Website
• Setup Simple Test for startup
  • Server
  • Website
• Server Functionality
  • Events Resource API
    • Create Event
    • Test Create
    • Validate Event
    • Test Validate
    • List Events
    • Test List
    • Update Event
    • Test Update
    • Delete Event
    • Test Delete
  • API Error Handling - Beautyful
    • 400
    • 404
    • 500
  • Website Functionality
    • Website Startup Test
    • Events List Component
    • Test Events List
    • Event Create Form Component
    • Test Events Create Form
    • Event Edit Form Component
    • Test Events Edit Form
    • Event Delete Component
    • Test Events Delete Form
• Overview & Docs update

Issues & Improvements & Tech dept

• Heavy containers
• Problem with timezones during insert and fetch
• Event list ordering
• Mess in NPM scripts in package json
• Add context to the delete confirmation modal
• Lazy E2E tests
• Testing datepicker