An app for synchronizing what you copy and paste (text,links,images,files) across different devices, built with MERN stack and socket.io
The frontend is divided into three parts: Home, Sign-in/Sign-up and the acutal clipsync app interface
- The home page:
- A header should contain a navigation menu for exploring the site.
- A hero section for displaying slogan/image and a call-to-action button that directs user to sign up service.
- A features section is required to showcaing mutiple features that are offered by the ClipSync app.
- A contact form is required for users to submit messages.
- A footer is required at the bottom section.
- On sign-in/sign-up pages:
- Sign-in page should contain a form with email and password fields. Also a link that redirects user to sign-up if they don't have an account must be present.
- Sign-up page should should contain a form with first-name, last-name, email and password fields. Also a link that redirects user to sign-in if they already have an account must be present.
- ClipSync app interface: After sign-in, user will be redirected to the web app page.
- A appbar on top needs to contain a ClipSync logo and nav menu with the addtion of user profile menu,optional notifications and message icons.
- A tab panel is need to switch between showing all clipboard items vs a filter list of pinned items
- A sticky tool bar which contains the upload image, file, clear all buttons and the main sync clip action button
- A Text component for displaying a plaintext clipboard item with an origin icon and a group of actions buttons (copy, pin and delete)
- A Lik component for displaying a link url clipboard item with an origin icon, link destination thumbnail icon and a group of actions buttons (copy, pin and delete)
- A Image component for displaying a image clipboard item with an origin icon, an image thumbnail icon, image metadata and a group of actions buttons (copy,download, pin and delete)
- A File component for displaying a generic file clipboard item with an origin icon, a file format icon, file metadata and a group of actions buttons (copy,download, pin and delete)
The backend is divided into four parts: mongoDB database config, data modeling, controller/middleware/utils and main server.
- Database config:
- Hanlding database connection and error reporting
- Data modeling:
- User model for user data and validation
- Clipping model for representing clipboard items from users
- Controller/middleware
- An user controller to handle user CRUD opertionas (user sign-in, sign-up, update profile and delete account)
- A clipping controller to handle web socket communication between clients and server and broadcasting messages to connected clients
- An error middleware for handling error and customized error messages
- A auth middlleware for protecting private route
- Server
- A express server for http requests and serving static assets
- A socket.io server built on top of express to handle web socket communication between clients and server and broadcast messages to connected clients
- Material UI - Component library
- React Router - Routing library
- React - JS library
- Create React App - CRA for React build setup
- Node - NodeJS
- Express - Express node framework
- Socket.IO - Bidirectional and low-latency communication
- MongoDB - Document-oriented database
- Mongoose - MongoDB object modeling, validation and business logic
- JSON web token - User authentication
- Add clippings sharing with other users
- Add types with TypeScript
- Optimize performance of React components
- Add testings
- GitHub - Haoliang Zhang
- LinkedIn - Haoliang Zhang