01/09/23

SOCIAL WEB APPLICATION DEVELOPMENT

FULLSTACK DEVELOPER CODE TEST | PANDORA COMPANY

TASK DUE DATE DONE DESCRIPTION

Design the Login Form 3/8/2024 Develop the login form

design using flex box
css

Design the Registration Form 3/8/2024 Develop the registration

form design using flex
box css

Design the Navigation Bar 3/8/2024 Develop the navigation

bar and add mui icons.

Design the Post UI Functionality 3/8/2024 Develop the post UI

using flex box and box
shadow css

Design the Left and Right bar functionality 3/8/2024 Develop the left and
right navigation bar
using flex box.

Make Routable 3/8/2024 Using BrowserRouter

function to make
routable login,
registration and home
page.

Add the Dark Mode Functionality 3/8/2024 Using Context API to

toggle light and dark
background.
FULLSTACK DEVELOPER CODE TEST | PANDORA COMPANY

TASK DUE DATE DONE DESCRIPTION

Create the Pandora Database 3/9/2024 -

Create the Users Table 3/9/2024 Include id, username, email,

password columns

Create the Posts Table 3/9/2024 Include id, desc, img, userid,
createdAT columns

Create Backend Project 3/9/2024 Create Backend Project using

Express

Configure Backend connection 3/9/2024 Using MYSQL nodemon package

to connect to mysql database.

Create Backend Routes 3/9/2024 To make sure routable which is

listening on port 8000.

API Testing (Login, Register) 3/9/2024 Using Postman to test API. Used
POST send request to create
account and used GET method to
get the list of the created user.

Create Auth Controller (Register) 3/10/2024 Used Bcrypt package to encrypt the
hased password when inserting
data into the database.

Create Auth Controller (Login) 3/10/2024 Used json web access token to sign
the user id as the access token to
prevent the unauthorized user.

Make Data can send from 3/10/2024 Used the useState to receive the
Registration Form (UI) data from form and sent to the
backend server which is port 8000
using axios package via POST
method. If the user account is
created, the status code 200 will be
returned. If the user is already
created then status code 409 will
be returned. Otherwise status code
500 will be returned.

Validate Data from Login Form 3/10/2024 Used the useState to receive the
(UI) data from form and sent to the
backend server which is port 8000.
If the username and password

Aung Khant Zin (Full Stack Developer)

 match , the status code 200 will be
returned otherwise status code 400
will be returned.

API Testing (POST) 3/10/2024 Using Postman to test API. Used

POST send request to create post.

Make Data can send from Post 3/10/2024 it incorporates user authentication
Share Form (UI) via AuthContext to identify the
current user. Using React hooks
(useState, useContext,
useMutation), it manages state,
retrieves user information, and
handles asynchronous mutations
for creating posts

Display Created post 3/10/2024 Using UseQuery method from

tanstack (state management) to
make post request for posts and
loop via data map for each post.

Create the Logout Functionality 3/10/2024 Clear the cookie and return status
code 200 with the message of ‘User
has been logout’

Update Created Post 3/11/2024 -

Aung Khant Zin (Full Stack Developer)

Screenshots (Database)

Posts Table

Users Table

POSTMAN API Testing

User Account Registration API Testing

Aung Khant Zin (Full Stack Developer)

User Account Login API Testing

Post API Testing

Aung Khant Zin (Full Stack Developer)

Logout API Testing

Login Form (Frontend UI Design)

Aung Khant Zin (Full Stack Developer)

Aung Khant Zin (Full Stack Developer)
Registration Form (Frontend UI Design)

Home Page (UI Design)

Aung Khant Zin (Full Stack Developer)

Github

https://github.com/kaungkaunglay/SocialMediaApp

Backend Server Port: 8000

Frontend Server Port: 5173

Aung Khant Zin (Full Stack Developer)