Skil - Learning status web application

Web application to keep track current learning status, with the form similar to a Kanban board and the user can create new card with responsive notification.

You can take a look at the deployed project here: https://skil.netlify.app/

Preview:

Preview video

SkilPreview_compressed.mp4

Register screen with validation

Login screen

Dashboard with "Login successfully" notification

Create new card

Card list

"More" dropdown includes edit and delete functions

💡Technologies used:

Front-end:

• React
• TypeScript
• Redux-toolkit
• TailwindCSS
• styled-components

Back-end:

• ExpressJS
• Mongoose
• Argon2
• JWT

Database MongoDB

New things I've learned:

• Clean project structure for both client (React, Redux) and server (Express, MongoDB)
• Config NoSQL database (MongoDB), create schemas using ORM
• Understand MVC and REST API concepts
• Using utility-first CSS framework(TailwindCSS) to build responsive website (I like it very much!)
• Using Redux-toolkit and RTK Query for state management and do API calls.
• Basic setup for deployment to Heroku and Netlify

Install project

Create new MongDB cluster

1. Create shared cluster
2. Choose "Connect" on newly created cluster
3. Choose Node.js and version 4.1 or later
4. Copy the connection string and replace "username" and "password" with credentials of the cluster

Clone project from GitHub

git clone "https://github.com/nguyenfamj/MERN_Skil.git"
cd server
npm install

Create .env file based on the .env.example file

# .env
...
MONGODB_URI=mongodb+srv://<username>:<password>@mern-sticki.9o6su.mongodb.net/?retryWrites=true&w=majority
<!-- Change MONGODB_URI value to your customized connection string -->

Start the client

cd ..
cd client
npm install
npm run start

Enjoy the application!