Moshal Social

Connecting Communities, One Commit at a Time

---

📖 Table of Contents

• 📖 Table of Contents
• 📍 Overview
• 📂 Repository Structure
• ⚙️ Modules
• 🚀 Getting Started
  • 🔧 Installation
  • 🤖 Running moshal-social
  • 🧪 Tests
• 🛣 Roadmap
• 🤝 Contributing
• 📄 License
• 👏 Acknowledgments

---

📍 Overview

Moshal Social is a private social network designed specifically for our scholarship program.

Leveraging React, Node.js, and Express, alongside MongoDB with Mongoose for the database, we're building a comprehensive full stack application. We've prioritized user security by implementing JWT for authentication and data protection, and carefully planned our data schemes. Our project management is organized using a shared file system with tables.

The platform features a user system encompassing registration, login, and profile editing. Additionally, it incorporates a user database with robust search and filtering capabilities, facilitating connections between individuals from various companies and institutions. Further, we've included a private jobs board for scholars and alumni to share job opportunities, along with a list of private WhatsApp groups and a phone book.

We have exciting plans for additional features. Looking ahead, our vision is to transition this project into an open-source initiative for our scholarship fellows, promoting collaboration and providing a platform for collective learning and teamwork on a larger scale.

---

📂 Repository Structure

└── moshal-social/
    ├── client/
    │   ├── public/
    │   │   ├── assets/
    │   │   ├── index.html
    │   └── src/
    │       ├── App.js
    │       ├── components/
    │       │   ├── Footer/
    │       │   ├── Navbar/
    │       │   │   ├── Icons/
    │       │   │   ├── Navbar.js
    │       │   │   └── Navigation/
    │       │   │       └── Navigation.js
    │       │   ├── Scrollbar/
    │       │   └── Widgets/
    │       │       ├── CategoryTitle/
    │       │       └── PictureEditForm/
    │       ├── index.js
    │       ├── scenes/
    │       │   ├── communityPage/
    │       │   ├── homePage/
    │       │   ├── jobsPage/
    │       │   ├── landingPage/
    │       │   ├── profilePage/
    │       │   └── usersPage/
    │       ├── state/
    │       │   └── state.js
    │       └── utils/
    │           ├── authUtils.js
    │           ├── formattingUtils.js
    └── server/
        ├── controllers/
        │   ├── auth.js
        │   ├── companies.js
        │   ├── company.js
        │   ├── institution.js
        │   ├── institutions.js
        │   ├── jobs.js
        │   ├── storage.js
        │   ├── user.js
        │   ├── users.js
        │   └── whatsappGroup.js
        ├── index.js
        ├── middleware/
        │   ├── auth.js
        │   └── errorHandler.js
        ├── models/
        │   ├── Company.js
        │   ├── Education.js
        │   ├── Institution.js
        │   ├── JobOffer.js
        │   ├── Occupation.js
        │   ├── User.js
        │   └── WhatsappGroup.js
        ├── routes/
        │   ├── index.js
        │   ├── auth.js
        │   ├── companies.js
        │   ├── company.js
        │   ├── institution.js
        │   ├── institutions.js
        │   ├── jobs.js
        │   ├── storage.js
        │   ├── user.js
        │   ├── users.js
        │   └── whatsappGroup.js
        └── utils/
            ├── data/
            ├── firebase.js
            ├── testDataLoad.js
            └── validators.js

---

⚙️ Modules

Server

File	Summary
index.js	This code sets up an Express server with middleware for handling JSON requests, security features, logging, and CORS. It also connects to a MongoDB database and defines routes for an API. The server listens on a specified port and starts the server and database connection.

Models

File	Summary
Education.js	This code defines a Mongoose schema for the Education model. It includes fields such as userId, institutionId, startYear, endYear, and degree, each with specific validations. The schema is used to create a Mongoose model called "Education", which can be used to interact with the corresponding MongoDB collection.
Institution.js	The code defines a Mongoose schema for an Institution with fields for name, students, and logoPath. It also includes validation for name length and uniqueness, reference to a User model, and validation for logoPath as a valid URL. The schema is then used to create a Mongoose model for an Institution.
WhatsappGroup.js	This code defines a mongoose schema for creating WhatsApp group objects. The schema includes fields for userId, link, name, and tags. It also includes validation rules for these fields. The code exports the WhatsappGroup model for use in other parts of the application.
User.js	The code defines a user schema using Mongoose ORM for a user management system. It includes fields like firstName, lastName, email, password, picturePath, bannerPath, location, bio, dateOfBirth, phoneNumber, linkedIn, moshalStatus, education, and occupation. It also defines a virtual fullName property and toJSON configuration. The code includes validators for various fields and sets default values where applicable.
Company.js	The code defines a Mongoose schema for a company with properties like name, employees, and logoPath. It includes validation rules for fields like name length, uniqueness, and employee IDs. The schema also sets a default value for the logoPath field and includes a validation for its format. The Company model is exported to be used in other parts of the codebase.
Occupation.js	This code defines a Mongoose schema for occupations, including fields for user and company IDs, position, start year, and end year. It also includes validation for user and company IDs, start and end years, and defaults and maximum values for start and end years. It creates a model for the occupation schema and exports it. (306 characters)
JobOffer.js	The code defines a schema for a job offer using Mongoose, a Node.js ORM. The schema includes various fields such as userId, companyId, content, offerTitle, location, offerLink, expReq, and referral, with specified validation rules. The JobOffer model is created based on this schema and exported for use in other parts of the application.

Utils

File	Summary
validators.js	This code provides functions to validate various user inputs, such as URLs, emails, phone numbers, and user IDs. It also includes functions to validate the existence of institutions and companies. Additionally, it includes a method to validate the end year based on the start year. The code utilizes regular expressions and interacts with a mongoose database.
testDataLoad.js	The code is used for a one-time data load. It imports models for various entities such as User, Company, and Institution, and data from a separate file. The loadData function asynchronously inserts the data into their respective collections using the insertMany method.
firebase.js	This code initializes a Firebase app and configures the storage functionality. It retrieves the necessary environment variables and sets up the Firebase config object. It then initializes the Firebase app and exports the storage module for further use.
authUtils.js	The code handles an expired token by making a POST request to log the user out, clearing local storage data, and resetting token and user data states. It ensures proper handling of expired tokens in a concise and efficient manner.
formattingUtils.js	The code includes two helper functions. 1. "formatDate" takes a date string and returns it in the format "yyyy-MM-dd". If no input is provided, it returns an empty string.2. "capitalizeFirstLetters" takes a string, capitalizes the first letter of each word, and returns the modified string. If the input is empty or not a string, it returns an empty string.
texts.js	The code defines two React functional components: FooterContributeText and HomepageMainText. FooterContributeText displays an invitation to contribute to the development efforts, explaining the benefits, features, and technologies used.HomepageMainText introduces the Moshal scholarship community, emphasizing its purpose, opportunities, and the value it offers to its members.

Controllers

File	Summary
user.js	This code provides functionality to manage user profiles by allowing users to retrieve, update, and delete their information, as well as add education and occupation items. It also updates related models such as institutions and companies.
company.js	The code retrieves a company from the database based on the provided ID using the findById method. If the company doesn't exist, it throws an error with a not found message. Otherwise, it returns the company object in the response with a 200 status code.
auth.js	This code provides functionalities for user registration, login, and logout. It uses bcrypt for password encryption and verification, jwt for token generation, and the User model for database operations.
storage.js	The code uploads and retrieves profile images using Firebase Storage. It saves the file, updates the user's picturePath, and returns the image URL. It also fetches and returns the URL of an existing profile image.
users.js	This code fetches all users from the database and returns them sorted by first name. It excludes the password field, and populates the education and occupation fields for each user. It handles errors and returns the users in JSON format.
institutions.js	The code exports a function that retrieves all institutions from the database using the Institution model. If no institutions are found, it throws an error with a 404 status code. If successful, it sends a JSON response with the retrieved institutions.
jobs.js	The code includes two functions: 1. getJobOffers retrieves all job offers, sorts them by updatedAt, and populates corresponding data.2. newJobOffer creates a new job offer by saving the provided data and populating company information.
institution.js	This code exports a function called "getInstitution" that retrieves an institution from the database based on the provided ID. If the institution is found, it is returned as a JSON response with a status code of 200. If not found, it throws an error with a message and a status code of 404.
whatsappGroup.js	This code provides core functionalities for managing WhatsApp groups:-getAllWhatsappGroups: retrieves all groups-newWhatsappGroup: creates a new group-updateWhatsappGroup: updates a group-deleteWhatsappGroup: deletes a group.
companies.js	The code retrieves all companies from the database and sends them as a JSON response. If no companies are found, it throws an error with a status code of 404.

Middleware

File	Summary
errorHandler.js	This code defines an error handler middleware function. It takes in an error, request, response, and next function as parameters. It sets the status code and error message based on the error object, and sends a JSON response with the error details.
auth.js	This code implements a JWT middleware function, "verifyToken", that protects routes by validating and verifying JWT tokens. It checks if the token exists and starts with "Bearer ", removes the prefix, and verifies the token using a secret key. If the token is valid, the verified user is attached to the request for further processing. Any errors are appropriately handled with relevant status codes and error messages.

Routes

File	Summary
user.js	This code defines routes for a user in an express application. It includes functionalities for getting/updating user data, adding/deleting education and occupation items. Token verification is used for authentication.
company.js	This code defines the companyRouter, a router that handles the GET request for getting a company. It also includes middleware to verify the token for authentication purposes.
auth.js	This code exports a router object for handling authentication routes. It includes routes for logging out, logging in, and registering. The corresponding functions for each route are imported from the auth controller module.
index.js	This code exports a router that handles various API routes for authentication, users, storage, institutions, jobs, companies, and WhatsApp groups. It also includes an error handling middleware.
storage.js	This code sets up a router for handling storage routes. It uses Express to define two routes: one for retrieving and updating profile images, and another for adding banner images (currently commented out). The routes require authentication, utilize multer for file uploads, and include logic for processing the image files.
users.js	This code sets up a users route in an Express application. It imports the getAllUsers controller and the verifyToken middleware. The users route is accessed through a GET request and requires a valid token.
institutions.js	This code defines an Express router for handling requests related to institutions. It includes a GET route that calls the getAllInstitutions controller function and verifies the authenticity of the request's token.
jobs.js	The code sets up an Express router for job-related requests. It defines routes for getting and adding job offers, protected by token-based authentication.
institution.js	This code sets up a router for handling requests related to institutions. It imports the necessary functions from the controllers and middleware. Specifically, it sets up a GET route for retrieving institution data by ID and adds authentication middleware for verification.
whatsappGroup.js	This code defines a router for managing WhatsApp groups in an Express application. It allows users to retrieve all groups, create a new group, update a group, and delete a group. Authentication is required for all operations.
companies.js	This code implements a Express router for handling requests to the "/companies" route. It uses the "verifyToken" middleware to authenticate requests, and calls the "getAllCompanies" controller function when the route is accessed with a GET request.

Public

File	Summary
robots.txt	The code follows the guidelines from the "robots.txt" protocol, allowing all web crawlers to access all parts of the website.
index.html	This code is an HTML template for a website created using create-react-app. It includes basic meta tags, a manifest file, and provides instructions for development and production builds. The main content of the website is expected to be rendered inside the div element with the id "root".

Src

File	Summary
App.css	This code defines the core styling for a web application layout. It utilizes flexbox for a responsive and flexible design, with a navigation bar, content area, and footer. The layout adjusts to fill the full height of the viewport.
App.js	This code defines the structure and routing of a React application. It manages authentication, state data, and renders different pages/components based on the user's authentication status. It uses React Router for navigation and various context providers to store and share data throughout the app.
index.css	This code defines custom CSS variables for color values, font styles, and common HTML element styles. It also includes styles for buttons, input fields, text areas, and select dropdowns. The aim is to provide a consistent and visually appealing UI design for a web application.
index.js	This code is responsible for rendering the root component of a React application, while applying strict mode settings. It fetches the "root" element from the HTML document and mounts the component within it.

Profilepage

File	Summary
index.css	This code defines CSS styles for a profile page. It includes styling for a banner picture, profile picture, and various layout components such as flexboxes and form elements. The code ensures proper layout and positioning of these elements on the profile page.
index.js	HTTPStatus Exception: 400

Experiencecontainer

File	Summary
experienceContainer.css	This code defines CSS styles for a responsive experience container, including buttons and a form. It uses flexbox to align and space the elements, allowing for easy customization and layout adjustments.
experienceContainer.js	The code defines a React component called ExperienceContainer which handles the rendering of experience items. It includes functionality for adding and removing experience items, as well as displaying a form for adding new items. The component receives data about organizations and experience items as props. It also uses context for authentication and user data. Overall, it serves as a container component for managing and displaying experience items.

Dataitem

File	Summary
DataItem.css	This code defines a CSS class called "profile-page-data-item" which specifies a flexbox layout for a row. The flex-direction is set to "row" and the contents are justified with space between them.
DataItem.js	The code defines a reusable component called DataItem. It displays a label, value, and corresponding icon using the FontAwesomeIcon component. If no value is provided, it displays "Not provided". The CSS classnames are also defined for styling purposes.

Experiencebox

File	Summary
experienceBox.css	This code defines the styling for an experience box element. It uses flexbox to align and position elements within the box. It includes features such as displaying company information, including name and logo, as well as duration and position. It also provides a remove button with hover effects.
experienceBox.js	The code is a React component called ExperienceBox that renders a box displaying information about an experience item. It also handles the deletion of experience items when the user clicks on a remove button. The component uses globalAuthContext to determine if the user is allowed to delete the item.

Userspage

File	Summary
index.js	This code defines the UsersPage component, which fetches user data from an API, stores it in local storage, and displays it. It also fetches institutions and companies data and passes them to a search bar component and a data display component.

Searchbar

File	Summary
Searchbar.js	The Searchbar component is a React component that provides a search functionality to filter a list of users based on various criteria. It allows users to search for specific users by name, as well as filter users by occupation (company) and education (university). The component also includes a random selection feature.
Searchbar.css	This code defines the CSS styles for a search bar component. The search bar has a flex layout, a centered display, and a background color. It also includes styles for a search button, a filter zone, a dropdown label, and a dropdown menu.
Searchbar.js	The code provides a search bar component for filtering job listings. It uses React's useContext and useState hooks to access and update data from two contexts: companiesData and jobsData. The component filters the jobsData based on the user's search query and selected company filter. The filters are applied to job titles, content, and company names. The filtered data is then set as the presentedJobsData. The component also allows users to search for jobs by company by selecting a company from a dropdown menu.

Usercard

File	Summary
UserCard.js	The UserCard component is a reusable component that renders a user's profile card. It displays the user's full name, profile picture, and contact icons for LinkedIn, WhatsApp, and email. Clicking on the name or picture will navigate to the user's profile page.
UserCard.css	The code defines a user card component with specific styles. It includes a background color, size, border-radius, and image settings. It also sets styles for the user's full name, including font size and padding. Additionally, it defines styles for the user's profile image and icons, such as height, border radius, and alignment.

Databasecontainer

File	Summary
DataBaseContainer.js	The code creates a functional component called DataBaseContainer. It receives data from usersDbDataContext and renders them as UserCard components. The UserCard components are generated based on the data provided and are rendered inside a parent div with the className "database-container".
DataBaseContainer.css	The code transforms a container into a grid layout with wrapped items. It centers the items and creates a gap between columns and rows. It allows scrolling within the container and adds padding.

Communitypage

File	Summary
index.css	The code defines the core functionalities of a community page. It uses flexbox to create a row layout with space around the items. The page is divided into four columns each taking up 25% of the width. Overall, it enables a responsive and visually appealing community page design.
index.js	The code is importing three components, namely MoshalSocials, PhoneBook, and WhatsappGroups.These components are then rendered within a div element with the class name "community-page".The purpose of this code is to create a CommunityPage component that displays these three functionalities.

Moshalsocials

File	Summary
MoshalSocials.css	The code sets up the layout and styling for social media icons and YouTube videos. The social-icons class makes the icons display in a row with equal space between them. The youtube-videos class arranges the videos in a column, with centered alignment and a small gap between each video.
MoshalSocials.js	The given code is a React component called "MoshalSocials" that displays a section for Moshal Program's social media links and YouTube videos. It utilizes FontAwesomeIcon library to display social media icons with links to respective platforms. The YouTube videos are embedded using iframes and videos are displayed in a responsive manner.

Whatsappgroups

File	Summary
WhatsappGroups.css	The code implements a responsive layout for a WhatsApp groups page. It uses flexbox for positioning and styling elements, allowing for easy arrangement and alignment. It also includes functionality for adding and displaying groups, including their names, tags, and edit options. Overall, the code provides a user-friendly interface for managing WhatsApp groups.
WhatsappGroups.js	This code is a React component that manages a list of WhatsApp groups. It allows users to search for groups, add new groups, edit existing groups, and delete groups. The component retrieves the groups from an API and updates the state accordingly. It also handles form submissions for adding and editing groups. The component uses FontAwesomeIcon to display icons for different actions.

Phonebook.js

File	Summary
PhoneBook.css	This code defines the styles for a phone book web application. It uses flexbox to lay out the input fields and contact list in a column format. The contact list has scrollable functionality and each contact item has a border and proper alignment for the name and phone number. The styles are applied using classes in HTML elements.
PhoneBook.js	The code is a React component called "PhoneBook" that displays a phone book interface. It allows users to search for contacts by name and filters the displayed contacts based on the search query. The contacts data is stored in an array and rendered dynamically.

Jobspage

File	Summary
index.js	The code is for a JobsPage component that displays a list of jobs. It fetches job data from an API and stores it in state. It also fetches company data and stores it in a separate state. The component renders a Searchbar component and a FeedContainer component, passing the job data through a context provider.

Feedcontainer

File	Summary
FeedContainer.css	The code defines the styling for a feed container and a job offer container. The feed container is a scrollable column that aligns its items in the center with a 1rem gap between them. The job offer container spans the entire width with centered align and justify content.
FeedContainer.js	The FeedContainer component is responsible for rendering the job offers in a container. It utilizes the useContext hook to access the presentedJobsData from the jobsDataContext. It renders a NewJobForm component at the top and iterates through presentedJobsData to render JobOffer components for each job.

Newjobform

File	Summary
NewJobForm.css	This code defines the layout and styling for a job offer form on a jobs page. It uses flexbox to center and align items, sets the width, and adds some spacing. It is designed with a clean and organized structure.
NewJobForm.js	The NewJobForm component is responsible for rendering a form that allows users to add a new job offer. It utilizes React's useState and useContext hooks to manage state and access global data. When the form is submitted, it sends a POST request to the server to create a new job offer. The response is then processed and the job offer is added to the local and presented job data. The form is shown/hidden based on user interaction.

Joboffer

File	Summary
JobOffer.js	The code above defines a component called JobOffer that displays the details of a job offer. It includes the offer's date, publisher, title, company logo, content, experience requirements, location, referral information, and an external link. It also has icons for favorites, editing, and deleting.
JobOffer.css	This code defines the styles for displaying job offers. It includes a flexible layout, headers, titles, company images, job details, and footer icons. The design aims to be aesthetically pleasing and user-friendly.

Homepage

File	Summary
index.css	The code defines styles for a homepage container, carousel, and a "Born Today" widget. It utilizes flexbox for layout and includes properties for positioning, sizing, and typography. The carousel displays images at a reduced opacity, while the "Born Today" widget features user profiles with names and images.
index.js	The code is a React component that represents a homepage. It fetches user data from an API, displays a carousel of images, and showcases users who are born on the current day. It also handles expired authentication tokens. The component utilizes React hooks and context API for state management.

Landingpage

File	Summary
index.css	The code defines the styling for a landing page container. It sets the width and height to 100% with hidden overflow and a background gradient. It also centers the content within the container and applies a blurred background image.
index.js	This code is responsible for rendering a landing page that contains login, registration, and password recovery forms. It uses React's useState hook to handle form data and manage the active form being displayed. The authContext.Provider is used to provide the form data and form relationships to the child components.

Formscontainer

File	Summary
formsContainer.css	The code defines the styling for login, register, and recovery forms, including their widths, background color, gradient, box shadow, border radius, and padding. It also specifies the layout and styling for form elements such as labels and inputs, as well as the styling for focused inputs, action links, and submit buttons.
formsContainer.js	The code consists of three forms: Login, Register, and Password Recovery. The Login form handles user authentication, sending the form data to the server and storing the user token and data in local storage. The Register form handles user registration, validating the passwords and sending the form data to the server. The Password Recovery form allows users to recover their password by submitting their email address. The code utilizes React hooks and React Router for navigation.

Footer

File	Summary
Footer.css	The code defines the styles for a sticky footer element with centered content. It also includes styles for a credit link with a hover effect and a tooltip container with hidden text that appears on hover. Some parts of the code are commented out and marked as TODO, indicating they need further work or consideration.
Footer.js	This code implements a Footer component for a web application. It displays links for Terms of Service and Privacy Policy, as well as a section for credits. It also includes a tooltip for contribution information.

Scrollbar

File	Summary
Scrollbar.css	The code provides a customized appearance for scrollbars in a web page. It sets the scrollbar width, defines the appearance of the thumb (the movable part of the scrollbar), and changes the background color when the thumb is hovered. The scrollbar track (the background of the scrollbar) is also styled.

Pictureeditform

File	Summary
PictureEditForm.js	The code exports a functional component called PictureEditForm. It renders a form with an input field for a user to select an image file. When the input value changes, the function onInputChange is called with the selected file. When the form is submitted, the function onFormSubmit is called. The buttonText prop determines the text displayed on the submit button.
PictureEditForm.css	The code snippet is responsible for styling the picture form on a user's profile page. It arranges the elements in a vertical manner, aligning them at the center with a gap of 5px between each row.

Categorytitle

File	Summary
CategoryTitle.css	The code defines the styling for a category title. It sets the text to uppercase, adds a bottom border, and adjusts the spacing and color. It also includes a span element with a background color and padding.
CategoryTitle.js	The code exports a functional component called CategoryTitle which takes a title as a prop and renders it inside a div element with the className "category-title". It also applies styling using the CategoryTitle.css file.

Navbar

File	Summary
Navbar.css	This code defines the core functionalities of a navbar component. It creates a responsive navbar with a logo on the left side. The navbar has a sticky position and a background color. The logo is styled with a background color, border radius, padding, and margin. The logo image is sized to 7vh.
Navbar.js	This code is a functional component that represents a navbar. It uses React Router to create a link to the homepage. It also imports a global authentication context and uses it to handle user authentication and logout functionality. If a user is logged in, it renders a navigation component and icons.

Navigation

File	Summary
Navigation.css	This code defines the styles for a navigation bar, with flex-based layout and various hover/active states. It also includes styles for icons and text within the navigation items.
Navigation.js	This code provides a navigation component for a React application using React Router. It uses FontAwesome icons and dynamically highlights the active link based on the current location. The component renders a set of links with icons and text, allowing the user to navigate between different pages in the app.

Icons

File	Summary
Icons.js	This code defines a functional component Icons, which displays a set of icons including settings, user picture, mail, and logout. The icons are imported from a library and styled using CSS. The component takes props for the signed user ID, user picture path, and logout function. The user picture is displayed as a link to the user's profile.
Icons.css	This code defines styles for icons and navbar user pictures. The icons are displayed as flex items, centered and spaced with padding. The icons and user pictures have hover effects. The user pictures have additional styles for dimensions, margin, border, and object-fit.

State

File	Summary
state.js	The code snippet defines four contexts using the React framework: general data, global authentication, institutions data, and companies data. These contexts enable components to access, consume, and share data across the application efficiently.

---

🚀 Getting Started

🔧 Installation

1. Clone the moshal-social repository:

git clone https://github.com/ArieLevental/moshal-social

2. Change to the project directory:

cd moshal-social

3. Split into 2 terminal instances and:

cd client
...
cd server

4. Install the dependencies in both instances:

npm install

🤖 Running moshal-social

Again, run in both instances:

npm run dev

🧪 Tests

Will be added soon!

---

🛣 Roadmap

Full Roadmap can be found here, this is only partial Roadmap:

• ℹ️ Visual users database with smart queries
• ℹ️ Refactor: Client code needs a lot of work
• ℹ️ Type Checking: incorporating TypeScript in the app
• ℹ️ Responsive design: Maybe adopting a styling library like Ant Design or Mantine
• ℹ️ Testing Framework: Thinking about Jest or Playwright
• ℹ️ Chat / Messaging system

---

🤝 Contributing

Contributions are always welcome! Please follow these steps:

1. Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
2. Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
3. Create a new branch with a descriptive name (e.g., new-feature-branch or bugfix-issue-123).

git checkout -b new-feature-branch

4. Make changes to the project's codebase.
5. Commit your changes to your local branch with a clear commit message that explains the changes you've made.

git commit -m 'Implemented new feature.'

6. Push your changes to your forked repository on GitHub using the following command

git push origin new-feature-branch

7. Create a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary. The project maintainers will review your changes and provide feedback or merge them into the main branch.

---

📄 License

This project is licensed under the MIT License. See the LICENSE-Type file for additional info.

---

👏 Acknowledgments

• Made by Adir Barak and myself
• Thanks to the Moshal's Scholarship Program for supporting the project and in general