screenrecord_sparkle.webm
The Sparkle Application presents a social media platform that allows its users to create personalized profiles to share their photos and thoughts connected to happy or mindful moments. Users are able to engage in the community by following each other, liking and commenting on other people's posts, as well as revisiting the posts they liked by viewing them in the favorites page.
The application was created as a group effort of four at the final of our 6-month long Frontend Web Development Bootcamp, using React in the Front- and Supabase in the Backend.
Login & SignUp:
- Create a new profile with a username, email and password. After successful registration you are automatically signed in.
- Login with your password and either your username or email
Home & Explore:
- Home: View posts of people you follow
- Explore: View posts of people you don't follow yet
- Load more posts if desired
- Links to the respective user profiles via their names in the post above the photo
Posts on all pages:
- Chronological order by most recently added to the community
- Option to like and unlike posts
- Open a comment modal window by tapping the speech bubble
- View all comments, post a comment and option to delete after posting
- Relative timestamp of upload
Profiles:
- Info display about the user
- Counters for the numbers of uploaded posts, followers and other profiles the user follows
- Posts can be displayed as miniatures in a grid or in a larger format underneath each other
- Tap on a miniature image to open it in a larger view window including its details
- Your own profile:
- Tap on the pencil icon to update your profile image and data
- Edit or delete your posts in the large view window
- Other people's profiles:
- Follow and unfollow users
Post a New Photo:
- Use the camera to take a photo or upload an image from your device
- Add an optional photo description and location info
- The image is compressed before it is inserted into the database
Search:
- Browse through users by username
- Visit their profile by the link in their name and profile picture
Settings:
- Switch to Dark-Light Mode
- Option to Log Out
About Sparkle & Team
- Information about the App and links to its creators
This project was carried out as a team effort of four. We communicated regularly via Discord to coordinate development progress. In addition, we used Figma as a tool to visualize our tasks and progress. Using Git as a version control tool, we made sure that all changes were merged, pushed and pulled to ensure a smooth process.
- Modal info windows displaying a list of
- users who liked/sparked a post
- followers of a user
- followed profiles of a user
- Interactive comment function for users to react and comment under previous comments
- Possibility to upload videos
- Option to upload multiple files in one post and navigate through them with a slider
Markup:
Styling:
JS Library:
Backend Database:
Programming Language:
Routing
IDE:
Version Control:
Here is a guide on how to set up and run the WhoCares Social Media project on your local computer:
You should have the following programs installed:
-
Clone das "Repository":
git clone https://github.com/bebzbzbz/Sparkle-App
-
Install dependencies & run the development server:
npm install npm run dev
-
Open your local host and have fun posting! 📸
The design of the project is based on a Figma template, which serves as the basis for the layout and color palette to ensure a consistent and appealing user interface. The design was developed with a mobile-first approach and provides a user-friendly interface for smartphones. The user is also able to choose to display the app in a dark or light color scheme according to their preference.
Click here to go directly to the project's deployment website