ShareMe

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

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}

Anup-maurya/ShareMe