You are on page 1of 14

PROJECT REPORT ON

“TechSarthi”
Mechanical and Industrial Engineering Department
(MIED)
Submitted for the course of
B.Tech Project
(MIN - 400 A)

Supervised by
Prof Akshay Dvivedi,
IIT Roorkee

Aayushi Mittal 19117001


Shailendra Singh 19117106
Harshvardhan Singh 19119015
Vipin Jain 19119048

1
ABSTRACT

TechSarthi : TechSarthi is an IIT Roorkee’s endeavor for supporting


Industrial Units in and around Roorkee. TechSarthi will focus on industries in
the 175 km radius of IIT Roorkee to help them adopt technically sound
solutions, gear up their growth and realize the objectives of going “Local to
Global”. This scheme will spot opportunities for new products, services,
markets, including assessing technology portfolio and intellectual property
rights. The objective of this initiative is to make Roorkee region a highly
efficient and effective industrial hub promoting investments and reducing
migrations.

This initiative needed a proper portal for the students and industries to
connect and transcend towards the solutions. The two major challenges
that we tried to achieve by this project are:

1. To provide students with real life problems : To let the students know
about the real life projects undergoing in our campus registered or
submitted by industries searching for aid or solutions for their
technical problems.

2. To aid MSME’s with their technological problems : For supporting


industrial units and spot opportunities for new products, services,
markets by supporting and providing small and medium scale
industries with technological aid by this initiative and making it visible
and accessible to them through a proper digital Platform.

2
CONTENT

1. BRAINSTORMING

2. DESIGNING

3. DEVELOPMENT

3.1 FRONTEND

3.2 BACKEND

3.3 DATABASE

4. DATA COLLECTION

5. HOSTING THE WEBSITE

6. RESULTS

7. REFERENCES

3
1) BRAINSTORMING
To accomplish the above mentioned objectives, following tasks were dealt
by our group throughout the course of BTP:

● Designed and Developed an aesthetic website to attract the students’


and industries attention toward the program.
● Introduction of a variety of functionalities on a timely basis as per the
requirements.
● Maintaining the website throughout the course of the BTP and taking
care of the bugs and technical inconveniences.
● Proper coordination with the TechSarthi team to keep the
opportunities flowing.

2) DESIGNING

Figma was used to design the website.

Figma- It is a cloud based graphics editor that helps in creating the designs
in the vector format. It certainly helped us to develop the wireframe layout
of the website up to its well designed prototype, which was created by
keeping in mind the usability across different platforms.

4
The Design of the project was done in three steps:-

1) Interviewing friends and colleagues to get insight of the challenges :


To understand more about the problem or group interviewed with
several of our friends and colleagues to know their POV about the
issues they are facing. Several company executives were also talked
over phone calls about the type of the problem they are facing and a
couple of field trips were done by the team to collect the data and
insights about the challenges we are trying to accomplish.

2) Brainstormed and sketched all possible solutions : The data


collected through the above step is grouped and filtered and timely
brainstorming seasons were organized to develop a basic architecture
of the app. Questions like what information to collect from the
industries without violating their privacy issues and what minimum
information to be provided on the portal for students to make them
informed choices were discussed by a team along with a faculty
advisor and a proper architecture for the website was created.

3) Made wireframes and the UI of the website : The final step was to
convert the architecture to an aesthetic website which can attract
students to it and appeal to the industries visiting it. Several
wireframes were made and after iterations and reiterations a final Ui of
the website was created in Figma.

5
2) DEVELOPMENT

Front End -

ReactJS - React is a free and open-source front-end JavaScript library for


building user interfaces based on UI components. React can be used as a
base in the development server-rendered applications. However, React is
only concerned with state management and rendering that state to the
DOM, so creating React applications usually requires the use of additional
libraries for routing, as well as certain client-side functionality.

Libraries of React used -

1. Material UI - Material UI is an open-source React component library


that implements Google's Material Design. It includes a collection of
prebuilt components that are ready for use in production.

2. Tailwind CSS - It is an open source CSS framework. The main feature


of this library is that, unlike other CSS frameworks like Bootstrap, it
creates a list of "utility" CSS classes that can be used to style each
element by mixing and matching.

3. React-Toastify - It is an npm package which allows one to add


notifications to the app with ease. It is easy to set up and allows more
operations and control over the toast messages.

4. React Router Dom - It is an npm package which is used to add dynamic


routing in a web app. It is a client and server-side routing library for React
that facilitates displaying pages and allowing users to navigate them.

6
5. Isexe - It is a minimal module of npm to check if a file is executable,
and a normal file that uses fs. stat and tests against the PATHEXT
environment variable on Windows.

6. Web-vitals - The web-vitals library is a tiny, modular library for


measuring all the Web Vitals metrics on real users.

7. Axios - Axios is an HTTP client library based on promises that makes


sending asynchronous HTTP requests to REST endpoints easier and
helps perform CRUD operations.

Back End -

NodeJS - Node.js lets developers use JavaScript to write command line


tools and for server-side scripting. The functionality of running scripts
server-side produces dynamic web page content before the page is sent to
the user's web browser. Node js is preferred in development as the same
language can be used for both server-side and client-side scripts.

Libraries of Node used -

1. Body-parser - Body-parser parses is an HTTP request body that


usually helps when more information about the URL is needed.
Specifically, in the context of a POST, PATCH, or PUT HTTP request .

2. CORS - Cross-Origin Resource Sharing (CORS) refers to the method


that allows the user to make requests to the server deployed at a
different domain.

3. Dotenv - Dotenv is a zero-dependency module that loads environment


variables from a .env file into process.env. It is a great way to keep
passwords, API keys, and other sensitive data out of your code.

7
4. Express - Express is a node js web application framework that
provides broad features for building web and mobile applications. It is
used to build a single page, multipage, and hybrid web application.

5. Mongoose - It is a library that is used with NodeJS that makes using


MongoDB(database) easier.

6. Morgan - It is a Node. js and Express middleware to log HTTP


requests and errors, and simplifies the process.

7. Multer - It is a node. js middleware for handling multipart/form-data ,


which is primarily used for uploading files.

Database -

MongoDB - MongoDB is a source-available cross-platform


document-oriented database program. Classified as a NoSQL database
program, MongoDB uses JSON-like documents with optional schemas.

MongoDB was used to store the data of various industries along with the
contact of supervised authority, their expectation from TechSarthi and
detailed problem statement.

MongoDB Atlas - MongoDB Atlas is a fully-managed cloud database that


handles all the complexity of deploying, managing, and healing your
deployments on the cloud service provider of your choice (AWS , Azure, and
GCP).

Atlas was used to store the data on the cloud so that it can be accessed by
the site easily and can be edited by the admin easily as and when needed.

8
3) DATA COLLECTION :

We, along with the TechSarthi Team contacted and visited a few MSME’s to
know about the problems which they are facing. The problems collected can
be assigned to an adequate department or group of students to brainstorm
and the best solution can be searched upon and implemented.

In our portal, we developed a page for displaying the problem statements of


the industries. In this page we assigned a unique code for each of the
problem statements and then added the title of the problem. And for further
information we added 2 more details one named “ADDITIONAL DETAILS”
which will display the problem statement in brief and another is “EXPECTED
OUTCOMES” that the company wants as a solution.

Some problems that were documented are -

1) CRM Application Development at Food Processing Unit -


All the processes carried out in the food processing process are
handled manually.The company is looking to develop a CRM
application to streamline their processes effectively.

2) Drone Based Agriculture Scanning -


A Rice processing company is looking for drone based scanning to
achieve their strategy of backward integration.The company is looking
for IITR expertise to match their expectations and provide them with
viable solutions.

9
3) Redesign of Moisture Meter -
Their table top model of moisture meter is bulky and oversized and
faces grinding issues on hard cereals. The company is looking to
redesign the existing moisture meters having compact size, adjustable
grinding clearance and making handle use easy.

4) Designing Automation Process -


The industry is a plastic upcycling unit that is using waste plastic for
making different types of furniture.It is looking for technical support in
making automatic the plastic segregation process.

5) Product development of Epoxy based grouting-


A tile grouting manufacturing company is looking for innovations in
their existing products to set new benchmarks into the market.

4) HOSTING :

Currently we have used Vercel for frontend deployment and Heroku for
backend deployment.

Link to the website - https://techsarthi-frontend.vercel.app/

But due to some issues we are currently facing, we are planning to deploy it
on AWS.

AWS - Amazon Web Services offers cloud web hosting solutions that
provide businesses, non-profits, and governmental organizations with
low-cost ways to deliver their websites and web applications.

10
5) RESULTS
1) Home Page 2) Contact Page

11
3) Team Page 4) Projects Page

12
6) REFERENCES :

1. For learning the basics of figma- youtube.com was used.


2. For learning MERN stack- udemy.com was used
3. For deployment of the website- Amazon Cloud Services were referred

Below are some of the websites, that were referred to learn about the
examples-

1. W3schools.com
2. Tutorialpoint.com
3. Wikipedia.org
4. Udacity.com
5. https://www.npmjs.com/package/
6. https://stackoverflow.com/

13
THANK YOU!

14

You might also like