Anup-maurya / ShareMe

ShareMe Social Media Website to upload posts

Home Page:https://share-me-web.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

favicon

ShareMe

GitHub contributors GitHub issues GitHub forks GitHub stars GitHub license

ShareMe.Demo.Final.mp4

Flow of the application

Backend Firebase + DB using sanity.io

  • Using sanity studio to create the schemas (database)
  • Creating schemas (blueprint of the content)
    • For creating users (By userName and Image)
    • For Creating Pins (Title,About, Destination, Category, Image, UserID, PostedBy, Save, Comments)
    • Saving Posts
    • Adding comments

Frontend using React + Tailwind CSS

  • Setup the project using create-react-app from Tailwind website
  • package.json
    • sanity client , sanity image url
    • react-router-dom
    • react-icons
    • react-masonry-css
    • react-spinners
    • Chakra UI - Toast
  • Login
    • Adding video with dark overlay + controls
    • Firebase integration - Google + Github
    • Adding newly created users on sanity db
    • Check if user already logged in
    • Redirecting to the homepage once logged in
    • Adding Typed.js Animations
  • Sidebar
    • Link vs NavLink
    • User attributes naming convention
    • Listing all categories
    • Go to userProfile Button
  • Pins container
    • Setting up entire routes of the application (react-router-dom)
  • Navbar
    • Adding search bar fuzzy searching functionality
    • Create new Post option
    • UserProfile page
  • Feed
    • Queries to get all the pins from sanity
    • Fetch category feed when category selected
    • Conditional rendering if no pins found
  • PinDetails
    • Layout of the pinDetails on clicking a pin
    • Showing Image, Title, About, Link, Category, Download button, PostedBy
    • Adding comment section for all users
  • Creating Pin
    • Utility of Creating pin
    • Upload Image url, title, about , destination, category
    • Create Pin Button writes to sanity db and redirects to the homepage
  • Pin
    • Query image , title, description, tags, likes, comments, postedBy from sanity
    • Attaching utils to the pin (delete, saved , url ) on hover
    • Showing the user who posted it
  • UserProfile
    • Fetch the details of user
    • Show all the created and save Posts
    • Firebase Logout button
    • Conditional rendering if no pins found
  • SocialMediaButtons
    • Layout of the social media buttons
    • Share the URL To social media sites
  • Spinner
    • Showing the spinner component when isLoading is true
  • Icons
    • Email Me Icon, redirect to contact page
  • index.js
    • Having all the exports t once place
  • Contact
    • Showing Contact us page setup using EmailJS
  • MasonryLayout
    • Displaying all the pins in Masonry format
    • Varying Vertical sizes
  • QRCode
    • Showing QR Code of current website
    • Login using mobile
  • Search
    • Fuzzy search for posts
    • Queries the rendered pins and returns pins matching title

Run Locally πŸš€

Clone the project

  git clone https://github.com/adarshanand67/ShareMe

Go to the frontend directory

  cd shareme-frontend

Install dependencies

  npm install

Start the server

  npm run start

Current Problems :- πŸ”§

  • Handle empty url of images
  • Categories not loading
  • Category search not working
  • Error in userProfile saved pins

Future Improvements TODO :- πŸ”§

Easy Changes

  • Improve github readme
  • Write the entire flow of the application
  • Add Github Auth
  • Add Typed JS Animations
  • Create customized login page
  • Light/Dark Mode Addition
  • Adding Toasts while login/logout
  • Changing highlight color
  • Contact us section in
  • Confirmations popups
  • Add right border of categories
  • Search Bar UI Like pinterest

Medium Changes

  • Scanning QR Code to open website on mobile (qrcode-react)
  • Ability to Add GIFs
  • Adding Share Button (Share Pin to Whatsapp, Twitter, Email)
  • Pressing enter should simulate button click
  • Show tags on posts
  • Infinite Scrolling
  • Showing toasts when post saved
  • Create Progressive Web App

Advanced Changes

  • Adding Voice search
  • Ability to follow other users
  • Creating a notification system when new user uploads a post
  • Adding feature like pin (Store count of likes)
  • Creating a guided tour of app
  • Feature of Liking a comment
  • Showing the time when comment was posted
  • Improve the saved Features
  • Writing unit tests using React Testing Library

Feedback πŸ“

If you have any feedback, please reach out to us at πŸ“« adarsh.anand.20031@iitgoa.ac.in.

Contributing 🀝

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License πŸ“œ

MIT

Authors πŸ‘¨β€πŸ’»


@AdarshAnand67

Acknowledgements πŸ™

About

ShareMe Social Media Website to upload posts

https://share-me-web.netlify.app/

License:MIT License


Languages

Language:JavaScript 96.2%Language:HTML 2.5%Language:CSS 1.0%Language:Shell 0.4%