Sold.com Take Home Project

This project includes several common tools and frameworks for developing a modern-day full-stack node/react web application.

The goal of this project is to gauge your fullstack capabilities and knowledge in the following areas:

• React
• Typescript
• Coding Patterns / Component Organization
• Existing NextJS knowledge, if any, or ability to learn it quickly
• Existing NestJS knowledge, if any, or ability to learn it quickly
• Existing Cypress knowledge, if any, or ability to learn it quickly

Summary

This take home project includes frameworks that utilize the best practices for modern-day SPA (Single Page Applications) enforcing techniques such as code splitting, SSR (server-side rendering), material design, modular styles, state management, typing with typescript, prettier linting, unit testing, and more.

As a React developer, you should be able to dive in and start writing components! (don't worry about setting up config =])

Happy Coding!!!

Frameworks Included

Major Dependencies worth mentioning

• React (v16)
• Next.js
• NestJS
• Cypress.io
• Material UI
• React Testing Library + Jest
• Redux
• Sass / SCSS (for styling)
• Typescript

Dev Dependencies worth mentioning

• Webpack Bundle Analyzer
• Prettier Linter
• Redux Dev Tools Extension
• Zsh + Powerlevel10k theme (docker container)

Installation

To get started, you will need to first install the following:

• Docker
• Docker-Compose
• NodeJS

Docker will let us run things in an isolated container environment.

Next you'll want to clone this repository. (Make sure you push updates to a personal github account, and make your commits there).

git clone -o sold.com https://github.com/brothatru/fullstackjs-interview.git

Install all npm dependencies locally

cd fullstackjs-interview
npm install && cd backend && npm install && cd ..

Build docker containers and start local servers

npm start

This command will start up docker containers for the following services (may take a few minutes):

• NextJS node application to serve our front-end react components
• NestJS node application to serve as our back-end api docs and endpoints
• MongoDB database with a users collection

Once the services are ready, you will be able to access them locally:

Our NextJS application will be running on http://localhost:4000

Our NestJS application will be running at http://localhost:9001/api/users/

Our MongoDB can be accessed at localhost:27018

Whats set up so far

Database

So far I've seeded a test user with the following credentials:

  {
    firstName: 'Test',
    lastName: 'User',
    email: '[email protected]',
    password: 'test1234',
    phoneNumber: '+16195555555',
  }

Backend

For our backend api, I've set up basic CRUD rest api endpoints that handle the following:

• Create a new user
• Fetch all users
• Fetch user by id
• Update a user by id
• Delete a user by id
• Search users

(Swagger documentation is included at http://localhost:9001/api/users/)

Frontend

In our frontend application, I've set up the following pages:

• http://localhost:4000/login page
  • Should render simple email/password login
• http://localhost:4000/dashboard page (only accessible after logging in)
  • Should render a table with random static data
• http://localhost:4000/sign-up page
  • This is what you will be building =)... So exciting!!!

Automation Testing

For our automation testing, I've installed and configured Cypress.

I've included a simple login spec that contains 2 tests:

• Checks that invalid credentials will render error
• Valid credentials should redirect to dashboard page

Your Task(s)

Before we begin, let me pause here so you can take a breath before your brain explodes.

• 1...
• 2...
• 3...

Okay ready? Here we go!

There are 3 core areas we are testing:

• Frontend React Skills
• Backend Rest API Skills
• Automation Testing Skills

It's okay if you are not well-versed in all 3 areas yet, just focus on what you're best at.

I'm fully aware that most candidates that I've reached out to, if any, will have experience with all of these tools and frameworks, so I'm not expecting anyone to be perfect.

With that said, there is plenty of documentation that can be found online, and these frameworks are quite popular and at the forefront of modern javascript development, so you will inevitably encounter these sooner or later.

Also, this test is set up to be very practical and to demonstrate what a real project could look like on our team.

Without further ado, here are the specs ~

Requirements

• Finish the sign up page (FE)
  • You will want to create a react form that utilizes the Users API for creating a new user
    • (Note: To access the api from the server side, you should use nestjs:3000 as the base url)
  • You are welcome to use material ui or build/style components from scratch if you want
  • Form validation is essential
• Update search users endpoint (BE)
  • Currently the search endpoint does a strict search
  • We want to be able to have a more flexible search (ie. case insensitive, partial emails, names, etc...)
• Automation test for registering a new user

Note*

For this project, Cypress isn't configured to run on docker, so you will need to install it on your local host machine's node_modules.

If you haven't already, cd into your project folder and run

npm install

To run the automation tests

npm run cy

This will open up a cypress window and run the tests in an actual browser.