This repository contains a project that aims to fullfil Drixit's Fullstack Developer challenge (described in this repository)
The challenge requires a fullstack application (frontend and backend) which presents a login page to a user, allows them to authenticate and then shows them their profile information.
On the other side, the backend that's responding to the frontend's requests, has 2 endpoints, one for authenticating and one for return a user's profile info.
As the challenge requirements are non restrictive, the developer (me) is tasked with making some decisions regarding the implementation of both parts of the app.
The decisions made are the following:
- Developed with ExpressJS for faster development and better routing management
- Used Typescript for enhanced developer experience, maintainability and to reduce potential errors
- Used dotenv for environment variables storing
- Used JWTs for session management
- Used MongoDB as the backend database with Mongoose as an ORM for better and cleaner data management
- Developed with React on a project created with
create-react-app
- Used Typescript for enhanced developer experience, maintainability and to reduce potential errors
- Used React Router for page routing, navigation and history management
- Used MUI (Material UI) for React to simplify the UX/UI development and have a consistent and elegant site
To run the project, there's a few items that need to be installed.
- NodeJS (The version used for developing the challenge is the lts version, 20.11.1)
npm
- MongoDB
There are various ways to install the required software, I'll explain below the steps I took to install my setup.
For Node and npm (and other programming environments) I use asdf which is a very handy multi-stack version manager (something like nvm
) and I would recommend anyone to try it.
Once asdf
is installed (installation steps vary from platform to platform):
asdf plugin add nodejs
asdf install nodejs lts
asdf global nodejs lts
# Then check the installation was successful with:
$ node --version
v20.11.1
$ npm --version
10.2.4
For Mongo, I'm using Docker as it's very easy to setup and pretty simple to manage.
Once docker
is installed (installation steps vary from platform to platform):
docker run -it --name drixit-challenge-db -d mongo:latest -p 27017:27017
- If the image hasn't been downloaded before, Docker will fetch it automatically
- The container name can be changed to other value. Just remember to match it to the config later
- The port that exposes the mongo database can be changed to another one. Just remember to match it to the config later
Once the above steps are completed, it's time to move on to the next stage: Running the project
To run the project, do the following:
Fetch the project:
git clone https://github.com/ivaneidel/drixit-challenge
Get your local MongoDB URI, it should look something like mongodb://localhost:27017/drixit-challenge-db
.
Install dependencies and create the .env
file
cd drixit-challenge/backend
npm install
cp env.example .env
Edit the .env
file and define the mongodb URI correctly.
Seed the database
npm run seed-db
You should see something like:
HASH_SALT=[REDACTED]
JWT_SECRET=[REDACTED]
Copy those secrets as they are and put them in the .env
file.
The HASH_SALT
is used for hashing user's passwords on the database and it's re-generated every time the seed-db
script is run to avoid using a fixed salt which would decrease the database security considerably.
The JWT_SECRET
is used for signing the JWT tokens to prevent attackers from forging the tokens and gaining access to the system.
Once the setup is done, the backend can be run:
npm run build
npm start
# For development
npm run dev
A message indicating the app is running on port 5000 should appear
Make sure the backend app is running, then do:
cd drixit-challenge/frontend
npm install
npm start
The browser should open on http://localhost:3000 where the frontend should be displayed.
A few screenshots to showcase the app: