ThinkShare - Saas Project

visit here - https://thinkshare.azurewebsites.net/

ThinkShare-Collaborative-Sticky-Notes-speed-up.mp4

• ThinkShare - Saas Project
  • 📃Description
  • 🚀Features
  • 📦 Getting Started
  • ⚡Technologies Used
  • ⚙️ Contributing
  • 🧪Testing
  • 🔨 Pushing your code
  • 📁Folder Structure
  • 🐛 Bug Reporting
  • ⭐ Feature Request
  • 📋 Release Notes
  • ❤️Acknowledgments

📃Description

ThinkShare is a Open Source alternative to many collabroative sticky notes productivity tools out there. ThinkShare allows multiple users to create, edit, and share notes in real-time. The app is built using the MERN stack (MongoDB, Express.js, React, Node.js) and utilizes WebSockets for real-time communication. Users can generate draggable notes, edit their contents, and collaborate with others on the same note simultaneously. The app also includes features like note organization, tagging, text formatting, and media embedding.

🚀Features

• Real Time for all users
• Multiple users collaboration
• Genertion of new notes
• Draggable notes
• Fully customizable notes with WUSIWUG editor
• Auto save notes for sharing later
• Request more features...

📦 Getting Started

• Visit https://thinkshare.vercel.app/ (the site may take some time for the first time since the hosting tier is the free one an the server might start when you visit the first time taking time between 2-5 minutes)
• Wait for your first sticky note to be generated.
• When you see your first note you are ready to go.
• Share the page url which would have a unique id after 'document/pageId' with your team which would help you to collaborate, you can share the entire url containing the unique Id.
• The sticky notes will be updated in real time for all team members.
• When you select the text there will be a tool tip giving you options to format your note.
• You can even add images through the tool tip.
• You can generate and drag the notes according to your needs.
• You can bookmark the tab so that you can use it in future or as a todo list and manage your tasks.

⚡Technologies Used

This project uses the following technologies:

• ReactJS: a JavaScript library used to build the frontend user interface
• Material UI: a React component library used to style the frontend user interface
• SocketIO: a Node.js websocket application framework used to build the socket
• MongoDB: a NoSQL database used to store data for the web application
• Mongoose: an object data modeling (ODM) library for MongoDB used to interact with the database

⚙️ Contributing

To get started with this project, you'll need to have the following installed:

• Node.js (v12 or higher)
• MongoDB Once you have these dependencies installed, follow these steps to set up the project:

0. Fork this repository: https://github.com/iqbalcodes6602/thinkshare.git
1. Clone your fork:

git clone https://github.com/<your github username>/thinkshare.git

1. Install backend dependencies:

cd server

 npm install

1. Install frontend dependencies:

cd client

npm install

❗ Important Note

Before starting the backend server, you need to set up environment variables.

• Environment Variables for frontend

  1. Create a .env file in the client directory.

  2. Populate the .env file with backend URL:

     REACT_APP_BACKEND_URL=http://localhost:3001
     

• Environment Variables for backend

  1. Create a .env file in the server directory.

  2. Populate the .env file with your MongoDB connection URL:

     MONGO_URL=mongodb://your-mongodb-url
     

4. Start the backend server:

cd server 

nodemon server.js

5. Start the frontend client:

cd client 

npm start

• The backend server with the socketio will start running on http://localhost:3001

• You can access the web application by visiting http://localhost:3000

🧪Testing

Before pushing the code to the repository, make sure to run the tests. To run the tests, follow these steps: IN ROOT DIRECTORY

1. Install dependencies for testing:

npm i 

2. Run the tests:

npm test

🔨 Pushing your code

If you would like to contribute to this project, please follow these steps:

    1. Fork this repository.

    2. Create a new branch for your changes: git checkout -b your-branch-name

    3. Make your changes and commit them: git commit -am "Add your commit message here"

    4. Push your changes to your forked repository: git push origin your-branch-name

    5. Open a pull request on this repository.

📁Folder Structure

The project's folder structure is as follows:

• server: contains the backend code written in Express and Mongoose
  • models: contains Mongoose models for the database
  • package.json: contains dependencies and scripts for the backend
  • package-lock.json: contains dependencies and scripts with version for the backend
• client: contains the frontend code written in React and Material UI
  • public: contains static files used by the frontend
  • src: contains the source code for the frontend
  • src/components: contains reusable React components
  • src/styles: contains styling for components
  • package.json: contains dependencies and scripts for the frontend
  • package-lock.json: contains dependencies and scripts with version for the frontend
• design: contains some images used in the README.md file and some image files used for UI design
• tests: contains some test files for the backend and frontend yet to be updated
• README.md: contains information about the project
• .gitignore: contains files and folders to be ignored by git
• package.json: contains dependencies and scripts for the JEST testing in root
• package-lock.json: contains dependencies and scripts with version for the JEST testing in root

🐛 Bug Reporting

Feel free to open an issue on GitHub if you find any bug.

⭐ Feature Request

• Feel free to Open an issue on GitHub to request any additional features you might need for your use case.
• Connect with me on LinkedIn. I'd love ❤️️ to hear where you are using this library.

📋 Release Notes

Check here for release notes.

❤️Acknowledgments

• Thanks to Anas Iqbal for inspiration and support during the development of this app.