Skip to content

๐Ÿ’ป๐ŸŒ My Purple Space: An advanced social media platform, crafted with React.js and powered by Supabase. Seamlessly register with email, engage in interactive post interactions, and fine-tune your profile. Step into the world of My Purple Space for a cutting-edge social experience. ๐Ÿ’œ๐Ÿš€

Notifications You must be signed in to change notification settings

MathiasMendozaVargas/MyPurpleSpaceNetwork

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

My Purple Space Social Media App ๐Ÿ“ฑ๐Ÿซ‚๐Ÿ’œ

Welcome to My Purple Space, a social media app built with React.js, Supabase, and vanilla CSS. This app allows users to create accounts using their email addresses and set up passwords. Once logged in, users can explore various sections within the app, each offering unique functionalities to enhance their social media experience. ๐Ÿš€๐Ÿ”ฎ๐ŸŒŸ

Features ๐Ÿš€

Home Page ๐Ÿ 

project-image

- The Home Page displays posts from the app. - Users can scroll through and interact with posts, including liking, disliking, and commenting.

Profile Page ๐Ÿ“

- The Profile Page is personalized for each user. - Users can view their own profile, edit their profile information, upload new posts, and switch between viewing their own posts and saved posts.

Friends Page ๐Ÿ‘ซ

- The Friends Page displays the current user's friends. - Each friend is presented as a Friend Card component, showcasing their information, profile picture, and an option to delete the friend.

Edit Profile Page ๐Ÿ–‹๏ธ

- Users can update their profile information, including username, first name, last name, gender, age, and profile photo.

Main Components and Modals ๐Ÿ”

Post Card Component ๐Ÿ“ƒ

  • Displays the author's username, profile photo, and the date of the post.
  • Features an options icon that opens a modal with custom functions, depending on the user's authority over the post.
  • Shows the post content, including text and emojis.
  • Displays post images if the user has included one.
  • Offers like, dislike, and comment buttons, each indicating the number of corresponding interactions on the post.

Create Post Modal ๐Ÿ“

  • Allows users to create and publish new posts.

Edit Profile Photo Modal ๐Ÿ“ธ

- Enables users to update their profile photo.

Edit Post Modal ๐Ÿ“

- Allows users to edit and update their existing posts.

Installation ๐Ÿ› ๏ธ

To run My Purple Space on your local machine, follow these steps:

  1. Clone this repository to your local system:

    git clone https://github.com/your-username/my-purple-space.git
    
  2. Change directory to the project folder:

    cd my-purple-space
    
  3. Install the required dependencies:

    npm install
    
  4. Set up a Supabase project and obtain the necessary credentials. Update the Supabase configuration in the app.

  5. Start the development server:

    npm start
    

The app should now be running locally, and you can access it at http://localhost:3000.

Live Demo ๐ŸŒ

You can explore My Purple Space in action by visiting our live demo.

Technologies Used ๐Ÿ’ป

  • React.js: Front-end framework for building the user interface.
  • Supabase: Backend-as-a-Service to handle user authentication and data storage.
  • Vanilla CSS: Custom styling for a unique app design.

Contributing ๐Ÿค

We welcome contributions to My Purple Space! If you'd like to enhance or fix any part of the app.

License ๐Ÿ“œ

This project is licensed under the MIT License.

Happy socializing in your own Purple Space! ๐Ÿ’œ๐Ÿš€

About

๐Ÿ’ป๐ŸŒ My Purple Space: An advanced social media platform, crafted with React.js and powered by Supabase. Seamlessly register with email, engage in interactive post interactions, and fine-tune your profile. Step into the world of My Purple Space for a cutting-edge social experience. ๐Ÿ’œ๐Ÿš€

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published