Skip to content

Instantly share code, notes, and snippets.

@francoromera
Created August 2, 2019 02:46
Show Gist options
  • Save francoromera/d67d06cf9e4f27857f9ea01ccfb19c6a to your computer and use it in GitHub Desktop.
Save francoromera/d67d06cf9e4f27857f9ea01ccfb19c6a to your computer and use it in GitHub Desktop.
Steps taken to implement coding challenge
Backend:
I started planning the backend, what features and endpoints I was going to need.
Packages.json:
I initialized the project with npm init, and added an npm start script.
Libraries:
Since it was going to use express, I installed express, body-parser and cors plugins.
The database was mongo, so I installed mongoose library.
Since the app required login I installed express-session library
Models:
Then I created model schemas for tasks and users.
Routes:
I created 3 different route files. One for authentication methods, one for user-related methods, and another one for task-related methods.
For authentication I created enpoints to login and logout.
For users I created only 2 endpoints. One is a GET to get the user, and the other one is a POST to create a new user. For demo porpuses I am using this POST method to register the users.
For tasks I created several endpoints although not all of them are used, I just wanted to write sample endpoints of GET, POST, PUT, PATCH and DELETE.
Mongo:
Since the application is rather small I chose to just perform mongo operations from the routes instead of a creating a separate service layer.
Most of the asynchronous operations were done with async/await taking advantage of the promises mongoose provides.
Session:
For managing sessions I used express-session, which allows to easily work with sessions in express, so I just set user ID in session when login is successful, and I clear it when logging out.
Password Check:
Used bcrypt to hash the user passwords when storing and comparing.
Error handling:
I chose to use middlewares to handle the errors.
All errors are returned as json responses.
When I have to propagate an error, I just use express's next method with the corresponding error, and it will eventually be returned by the middleware.
Frontend:
Since I had to posibility to choose the framework I chose react because it's the one I feel more confortable with.
Libraries:
I started a react project from create-react-app.
Then I cleaned some of the initial code.
I was going to make calls, so I installed axios library.
And since the app consists of 2 pages, I installed react-router-dom to handle routing and history library to navigate across pages.
Finally I added bootstrap from a CDN to manage styles.
Components:
First I created a component for each of the pages: Login and Main. Later I realized I would need a page to register user so I added a page for that as well.
Since it's a small project, I didn't have the need to use a library like redux-form for working with forms, so I created a couple of small components and a helper method to validate forms.
API:
Then I created a module to connect with the API using axios.
Configured axios to store a cookie when session is set, and kept user information in session storage.
Added an interceptor to handle 401 responses to take user to login page because the session has expired.
Git:
For git I created a public repository in my own GitHub account.
Then I created branches for master and develop.
Then I created a feature branch to add the server code, a PR from that feature branch to develop, and merged the PR.
Then checked out develop, pulled latest, created another feature branch to add the UI code, created a PR from taht branch to develop, and then merged the PR.
Then I checked out develop again and pulled latest. Created a reelase branch, and a PR from there to master, and merged the PR.
Finally I tagged the commit with the version number.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment