benjamin-roger / shoppingify-dev-challenge-next.js

Take on Shoppingify from devchallenge.io

Shoppingify

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

This repo is my take on the Shoppingify dev challenge.

It has been built with React and Next.js, runs on Vercel with a MongoDB database. It is rendered mostly client-side, with API exposed on a separate server.

How to use

Clone this repo to your folder.

Database settings

Create a MongoDB database.

Create 3 collections :

• lists
• items
• users

Create a few items with the following structure

    {
        "_id": "5f9fb2318e7d6fb94515ccd9",
        "name": "Avocado 2kg",
        "category": "Vegetables",
        "amount": 1,
        "note": "Hello avocado",
        "image": "https://i.imgur.com/zPu5pXI.jpeg"
    }

Environment variables

Create a .env file at the root of the folder "api" with 4 environment variables

PORT=8000
MONGODB_CONNECTION_STRING={{your MongoDB connection string}}
JWT_SECRET={{your JWT secret}}
JWT_EXPIRES_IN={{your JWT expiration duration (example : 24h)}}

Create a .env.local file at the root of the folder "client" with 1 environment variable

BASE_API_URL='http://localhost:8000'

Launch the API app

In the /api folder, run

npm i

npm start

It will open the webserver, to serve the API requests on http:localhost:8000

Launch the client app

Open a separate command window. In the /client folder, run

npm i

npm run dev

It will open the client app itself, available on http:localhost:3000

Deploy your own

Deploy the example using Vercel:

API app

Run the API app on your preferred host.

Client app

Be careful to add the environment variables !