Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/justalex-webdev/social-media-app

WONDER is a React full stack social media app. The app is build in order for people to see something out of their circle of interests.
https://github.com/justalex-webdev/social-media-app

firebase html-scss-javascript react social-media-app tailwind

Last synced: 7 days ago
JSON representation

WONDER is a React full stack social media app. The app is build in order for people to see something out of their circle of interests.

Awesome Lists containing this project

README 

        
# WONDER



## About



WONDER is a React full stack social media application. The app's goal is to expand one's circle of interests and help them grow as a person.



## Development 



Some of the technologies used throughout the development of this application are React, Firebase and Tailwind. There are custom hooks, dynamic and protected routes (React-Router-Dom) and integrated authentication (Firebase). Futhermore, there is a thechnology used for the transition betweeen the pages (Framer Motion) and a close to perfect state management (useContext).



## Live Demo



Experience WONDER now with our live demo! If you prefer not to use your personal information, utilize the following demo credentials:



**Email:** `[email protected]`

**Password:** `password`



[Explore the Demo](https://social-media-app-2fe38.web.app/ "See the demo")



## Case Study



### **Role**

Web Development



### **Responsibilities**

Structure & Design / Firebase Integration / Authentication / Research & Optimization



### **Challenge**



The previous version of the application suffered from poor code quality, particularly in its state management. Additionally, the method for handling posts was slow and outdated. The state management issue was particularly problematic, as deleted posts persisted in the database, resulting in unnecessary data storage costs that could have had severe financial implications for the company.



After a thorough analysis of the client's current situation and technological needs, it became evident that a comprehensive overhaul of the state management system was imperative.



### **Process**



Following a detailed examination of the old code, the recommended course of action was a complete rewrite of the application, guided by a human-centered design philosophy throughout the design and development process. This solution was agreed upon by the client.



Development hinged on a plan crafted in collaboration with the owners, encompassing the addition of new features, a redesign, and the implementation of an updated state management system. Ongoing support and maintenance were integral components of this process.



During testing, client feedback from end-users was collected and incorporated into the iterative development process. The final stages involved providing assistance and support for the implementation of the application.



Key technologies employed during the development included React, Firebase, and Tailwind. Custom hooks, dynamic and protected routes, as well as implemented authentication, were integral to the project.



### **Outcome**



The resulting application, named WONDER, boasts enhanced speed, reliability, and cost-effectiveness in maintenance. The rewrite not only increased scalability but also introduced a visually appealing design. Notably, the revision of the state management system and the elimination of unnecessary data storage led to a substantial 35% reduction in data management expenses for the company.



**Note**

The application is currently in the testing phase and hasn't been deployed at the client's company. However, a fully functional demo/testing version is available for exploration.