This is a social media web application powered by React and provides main functionalities of a social media app such as creating new posts, liking a post, following a user, etc. With this web app you can interact and show data requested from Tomateto API through user interface.
This is the front-end side of Tomateto. To learn more about the back-end side, click here.
Here is the working live demo : https://tomateto.com
Single Page App (example code)
By building this web app as a single page app, users can navigate through the pages without reloading the entire page. This feature is powered by React Router.
Responsive Design (example code)
This web app will adapt its layout based on the device it’s currently running on. So it will always look good whether you use it on mobile or desktop.
| Desktop | Mobile |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
Instant Search (example code)
Users can type in keywords and get results instantly.
Image Resize & Compression (example code)
To reduce pixelation on pictures loaded on the page even on the smallest scale, every picture uploaded will be compressed and resized by implementing image processing. This procedure also reduces upload size. This feature is powered by Pica.
Users can sign up and log in to create posts, comments, and follow other users. They also can reset password, change email, and delete their account when needed. This feature is powered by Firebase Authentication.
Error Logging (example code)
When the web app detects an error, it will store the error message, timestamp, and the action that causes the error in a dedicated NoSQL database to aid in the debugging and troubleshooting process.
Dark Mode (example code)
It’s just better for your eyes.
- Follow and unfollow user
- Create, edit, and delete post
- Like and unlike post
- Create and delete comment
- Like and unlike comment
- Upload photo, powered by Cloud Storage for Firebase
- Add emoji, powered by Emoji Mart
- Edit profile
Through this project, my main goal was to learn how to write my own REST API and the React app to interact it with. I also wanted to use this opportunity to learn about cloud, containers, testing, and CI/CD. Initially I wanted to build it as microservices but I figured it was a bit too ambitious for what I was trying to build with the amount of time that I had, so I built it as a monolithic app instead.
If I had more time, I would add these :
- Implement websocket to add features like notifications, private message/chat, live feed, etc.
- More advanced text editor to add features like mentions, hashtags, hyperlink, etc.
- Add tests for the react app.
- Add pagination, I figured that there won’t be that many posts so I plan to add this later when it’s absolutely needed.
- Optimize it further by implementing caching (perhaps Redis?).
If you are having issues or found a bug, feel free to open an issue. Also if you have questions about the project, feel free to reach out at: adam@adamscript.com.