ShareMe

ShareMe is participating in JWOC

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
• Change icons of Saving Pins
• Error in userProfile saved pins
• Deleting Comments by users

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
• Showing confetti animation, creating a pin
• Contact us section in
• Confirmations popups
• Add right border of categories
• Fix URL of profile page to the title
• 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 (PWA)

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
• On it - [] Feature of Liking a comment
• Showing the time when comment was posted
• Improve the saved Features
• Writing unit tests using Vitest

Feedback 📝

If you have any feedback, please reach out to us at 📫 [email protected].

Contributing 🤝

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Read the contributing guidelines before contributing. Please make sure to update tests as appropriate.

Contributors ✨

Made with ❤️ by Awesome Contributors

License 📜

MIT

Authors 👨‍💻

@AdarshAnand67

Acknowledgements 🙏

• Awesome Readme Templates
• React Docs
• Firebase Docs
• Sanity Docs
• Tailwind Docs

---

Don't forget to ⭐ this repo

Building with the COMMUNITY for the COMMUNITY ❤️