shoreasg / mighty-jaxx-coding-challenge

MightyJaxx Admin Dashboard

Demo Links

Frontend

Backend

Repositories

Frontend Repo

Backend Repo

Introduction

This was an assignment by Mighty Jaxx. Task was to create an admin dashboard with login function and CRUD. Details can be found here

Features:

• User is able to login using the following credentials (Email: [email protected], Password: MightyJaxx@123)
• User is able to add new products into the dashboard
• User is able to edit existing items in dashboard
• User is able to delete items on dashboard

Screenshots:

Mockup

Login Page

Dashboard Page

Add Product Page

Edit Product Page

Delete Product Page

Technologies used

FrontEnd

• NextJs
• Redux ToolKit
• Axios
• react-hook-form
• react-toastify
• sweetalert2

BackEnd

• Node.js
• Express
• Mongoose
• bcrypt
• cors
• jsonwebtoken
• nodemon
• zod

Reflection

This is my second time working on a project using typescript. Tried new tools such as zod, redux tool kit and jsonwebtoken. Overall, enjoyed this take home assignment as i get to try and learn new tools.

Assumptions

1: I assumed that no register form is needed as this is an admin page, hence registration should be done in private

2: I assumed that uploading of image requires the user to enter the image url. This means that the user have already uploaded the image to a image hosting site and just need to enter the URL.

Setup

To run this project, install it locally using npm:

Frontend

$ git clone
$ npm i
Add NEXT_PUBLIC_BACKEND_URL= to .env
$ npm run dev

Backend

$ git clone
$ npm i
Add
PORT=
DATABASE=
MONGO_USER=
MONGO_PASSWORD=
MONGO_BASE_URL=
SECRET=
JWTSECRET=
FRONTEND_URL=
to .env
$ tsc
$ npm start

Contributors

Shoreasg