dukuo/walmart-challenge

Main repository for the Walmart Fullstack Challenge

Walmart Dev Challenge

• Introduction
• Technologies
• NextJS & SSR: A Primer
• Requirements
• Installation
• Usage
• Testing
• Credits

Introduction

This is a solution for the Walmart Fullstack Challenge.

Technologies

The solution consists of an universal app with Server-Side Rendering with a tiny API using NextJS API Routes, a Mongoose database and served with Docker Compose.

Frontend

• NextJS
• Material UI
• Styled Components
• Axios
• Formik
• Yup
• Typescript
• TODO

Backend

• NextJS
• Mongoose
• Typescript

Testing

• Jest
• @testing-library/react
• msw (todo)

NextJS & SSR: A Primer

Some of NextJS awesome features:

Lovely image by Hoang V. Vo https://hoangvvo.com/blog/migrate-from-express-js-to-next-js-api-routes/

• Higher SEO score (based on Lighthouse scores)
• Minimized client side rendering time (with client-side hydration)
• Secure server-side business logic
• Backend and Frontend unified in one project
• Universal built-in routing

Further reading:

• What is the point of SSR these days? (Github)
• The Benefits of Server Side Rendering Over Client Side Rendering (Walmart Labs @ Medium)
• The benefits and origins of Server Side Rendering
• React SSR with Next.js #1. Concept of Server Side Rendering & basics of routing
• Nextjs by Vercel

Requirements

• Node > 12
• Docker & Docker Compose
• Yarn

Installation

Clone this repo, then navigate to walmart-search-engine-app, then:

yarn

Usage

To make sure we are starting fresh use the following docker-compose command from the root folder of the cloned repo:

docker-compose up --force-recreate

The app will be available at http://localhost:3000/search/products

Testing

yarn test

Code coverage:

yarn test:coverage

Credits

@dukuo - Dilip Ramírez - dilip.ramirez@gmail.com

TODO

• Fuzzy text search instead of built-in full-text mongo search using mongoose-fuzzy-searching
• Production multi-stage docker build
• More intensive unit & integration tests
• Async form submission onChange
• Responsive UI
• Better pagination
• Refactor utility methods
• Keep researching about proper git flow practices
• Optimize computing intensive methods
• Testing: Mock network with msw
• Testing: Complete todos