GithubHelp home page GithubHelp logo

imvanzen / carrot-events Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 1.19 MB

Simple event manager

JavaScript 93.42% Shell 0.45% Dockerfile 0.65% HTML 3.98% CSS 1.50%
docker nodejs postgresql react

carrot-events's Introduction

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

carrot-events's People

Contributors

imvanzen avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.