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)
