Online platform for everyone to readily share your life, make friends, and interact with others all over the world.
It mimics the functionality and interface of Facebook.
You can browse JasperBook on your computer or cellphone.
Online platform for everyone to readily share your life, make friends, and interact with others all over the world.
- MongoDB — document database
- Express(.js) — Node.js web framework
- React(.js) — a client-side JavaScript framework
- Node(.js) — the premier JavaScript web server
Front End
- Using React as the front-end framework
- Using axios to help connect front-end to back-end
- Using jwt-decode to helps decoding JWTs token which are Base64Url encoded.
- Using Sass, CSS preprocessors, in the project. Making CSS code cleaner and reusable.
- Using Bootstrap 5 CSS framework to help create responsive front-end website
- Using timeago to parse, validate and display date and time that are consistent with back-end
- Using material-ui to display beautiful icons on the website
Back End
- Using Express as web framework for Node.js.
- Using Helmet to help secure Express apps by setting various HTTP headers
- Using Mongoose to help writing MongoDB validation, casting and business logic
- Using morgan as HTTP request logger middleware for node.js
- Using JSON Web Tokens to add token based authentication to RESTful API
- Using Multer for file upload feature
- Using bcryptjs to hash and check password
- Using dotenv to help load the environment variables saved in .env file
Sign up & login
-
Sign up for a JasperBook account to start the journey
-
Log in to your JasperBook user account
Or you can use the sample account to quickly log in
- email: takeshi@example.com
- password: jasper
Timeline main page
- The left column is the user account that is recommended to be added as a friend
- The right column is the friends you have
- The middle column is your own and all your friends' articles
- If you are a newly registered user, Jasper will be the default friend of everyone.
- You can search for users by entering keywords on the top of navbar.
Post your first post
- Write a paragraph
- Choose a photo
- Tag a user
- And show the current mood, press the share button !
- Then you can see your new post with the time it was posted
- You only can edit or delete your post
Respond to others
- You can press the love button to like someone else's post
- You can respond by commenting below the post
- You can see the name and time of the message
- You can edit or delete your own message
Personal page
- By clicking on the person's name or photo, you can visit each person's personal page
- The middle column here will only have each person's own article
- If you log in to your personal page, you can also post a message directly at the top of it
- The right column is the basic information for each person.
- What's more special is that Jasper's page has records of my work and professional skills
Edit personal info
- Click on your photo of the navbar. And click the edit profile button.
- You can update your personal info
- Upload your avatar
- Upload your cover photo
PS: The advertising site on the right is where I have volunteered for many years.
JasperBook app is using our own REST APIs. To learn more about the API, please check out my API Docs for more information.
Within the API document you will find the following directories and files:
dist/
├── auth/
│ ├── register
│ ├── login
│ ├── postRefreshToken
└── users/
│ ├── putUser
│ ├── getUser
│ ├── getAllUsers
│ ├── getRecommendUsers
│ ├── searchUsers
│ ├── followUser
│ ├── unfollowUser
│ ├── getFriends
└── posts/
│ ├── postPost
│ ├── getPost
│ ├── putPost
│ ├── deletePost
│ ├── postLikeDislike
│ ├── getTimeline
│ ├── getPersonalPost
│ ├── postComment
│ ├── putComment
│ ├── deleteComment
└── upload/
├── postPostImage
├── postPersonalImage
└── postDeleteImage
- Build a website to improve web page fluency
- User can updates or resets password
- Online chat with friends
- Posting can mark the location