Sedana Yoga - Frontend Mock Test

A repository for completing Binar Career Development Program.

About The Project

In this mock test, the task was pretty straight forward. We have to translate the backend (provided by Binar) into a frontend design and fully functional including cosuming the API of User (login and register) and Product (CRUD functionality). The site is fully up and running in this url https://mocktest-binar.vercel.app/

(back to top)

Built With

The following lists show my development stack:

Frontend Stack

• Next JS
• SASS
• CSS Module
• Axios

Backend Stack

• Provided by Binar

Development Tools:

• Git
• Neovim

(back to top)

What I've learnt?

• Integration NextJS with RESTful API => in the past, I almost used Firebase for storing database and authentication, along with the CRUD method provided by Firestore. In this project, it's a bit different, I was using API documentation to connect with User Auth and Product CRUD which needs auth token to implement.
• ESLint Config for Deployment => I learn about how to mitigate issues in deployment in this case I'm using Vercel, since its connect smoothly with GitHub and NextJS.
• Learn Best Practice of GitFlow => Having 2 branches dev and main in github seems very convinient and more cleaner repository. And I connect them with Vercel which will treat dev as Preview Site and main as Production Site.
• Mitigate CORS issue => was getting CORS issues in PUT and DELETE method but I managed to get it solved by setting my next config, so it's good stuff to know, not aware of this possibility in the past.

(back to top)

Getting Started

The Feature

• CRUD Functionality of Products.
• User Authentication with token
• Fully Responsive Site
• NextJS is implemented but only using CSR (Client Site Rendering)
• Global State is used in this project using React Context API

Prerequisites

If you want to edit the code, you need to have nodejs and NPM.

Install all dependencies by this command if you already get node and npm installed in your system.

cd <repository-folder>
npm install

(back to top)

Usage

• Set your terminal directory to repository folder
• Start the Next Server by running this command

  npm run dev

• Open localhost:3000 in your browser

(back to top)

Space for Improvement

• Cookies or Session implementation (if we refresh the page, it won't keep the token)
• Notification Implementation to increase interactivity when loading/error/warning

(back to top)

License

Distributed under the MIT License.

(back to top)

Contact

Twitter - @cok_yoga LinkedIn - Sedana Yoga

(back to top)