Synapsis Frontend Challange

Synapsis Frontend Assessment Test

Here for the assessment, i code webapp named Gorest that has feature for fetching data from Gorest public API that have fake data, push some users data, edit the data, and delete the data

This is a Next.js project bootstrapped with create-next-app.

⚡ Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

✏️ Feature

Search User by username
Create User
Delete User
Edit User
View Posts and Comments User

💡 Tech Stack

Next JS
Tailwindcss

📁 Folder Structure

📦synapsis-frontend
┣ 📂.git
┣ 📂public
┃ ┣ 📂images
┃ ┃ ┣ 📂icons
┃ ┃ ┃ ┗ 📜icons8-search-49.png
┃ ┃ ┗ 📜home-gorest.png
┃ ┣ 📜favicon.ico
┃ ┣ 📜next.svg
┃ ┣ 📜thirteen.svg
┃ ┗ 📜vercel.svg
┣ 📂src
┃ ┣ 📂components
┃ ┃ ┣ 📂Card
┃ ┃ ┃ ┣ 📜CommentCard.jsx
┃ ┃ ┃ ┗ 📜PostCard.js
┃ ┃ ┣ 📂DefaultLayout
┃ ┃ ┃ ┗ 📜DefaultLayout.jsx
┃ ┃ ┣ 📂Loading
┃ ┃ ┃ ┗ 📜Loading.jsx
┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┣ 📜AddUserModal.jsx
┃ ┃ ┃ ┣ 📜DeleteUserModal.jsx
┃ ┃ ┃ ┣ 📜EditUserModal.jsx
┃ ┃ ┃ ┗ 📜PostDetailModal.jsx
┃ ┃ ┣ 📂Navbar
┃ ┃ ┃ ┗ 📜Navbar.jsx
┃ ┃ ┣ 📂Table
┃ ┃ ┃ ┗ 📜UserTable.jsx
┃ ┃ ┗ 📂Toast
┃ ┃ ┃ ┗ 📜SuccessToast.jsx
┃ ┣ 📂hooks
┃ ┃ ┗ 📜fetcher.js
┃ ┣ 📂pages
┃ ┃ ┣ 📂api
┃ ┃ ┃ ┗ 📜hello.js
┃ ┃ ┣ 📜index.js
┃ ┃ ┣ 📜post-list.js
┃ ┃ ┣ 📜user-dashboard.js
┃ ┃ ┣ 📜_app.js
┃ ┃ ┗ 📜_document.js
┃ ┗ 📂styles
┃ ┃ ┣ 📜globals.css
┃ ┃ ┗ 📜Home.module.css
┣ 📜.eslintrc.json
┣ 📜.gitignore
┣ 📜jsconfig.json
┣ 📜next.config.js
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.js
┣ 📜README.md
┗ 📜tailwind.config.js

🌐 Deploy on Vercel

You can view demo for this project here Gorest Synapsis Frontend Assessment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.