0% found this document useful (0 votes)
8 views40 pages

Full-Stack Development Internship Report

Uploaded by

piyushrana1236
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
8 views40 pages

Full-Stack Development Internship Report

Uploaded by

piyushrana1236
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Annexure-I

Summer Internship report

Ciphers Schools

A training report

Submitted in partial fulfillment of the requirements for the award of degree of

Bachelors of

Technology (CSE)

Submitted to

LOVELY PROFESSIONAL UNIVERSITY

PHAGWARA, PUNJAB

From 06/04/25 to 08/09/25

SUBMITTED BY

Name of student: Abhayraj


Singh Mandloi
Registration Number:
12311605
Signature of the student:
Annexure-II: Student Declaration

To whom so ever it may concern


I, Abhayraj Singh Mandloi, 12311605 hereby declare that the work done by me on “training in
Full-Stack Development from Cipher Schools” from June, 2025 to July, 2025, is a record of
original work for the partial fulfillment of the requirements for the award of the degree, Bachelors
of Technology.

Abhayraj Singh Mandloi


12311605

Dated: [Link].2025
INTRODUCTION OF THE PROJECT
UNDERTAKEN

 Objectives of the work undertaken

The main objective of my summer training was to gain a complete and practical understanding of Full-Stack
Web Development using the MERN stack. This stack, which stands for MongoDB, [Link], [Link], and
[Link], is widely used in the software industry for building fast, scalable, and interactive web applications.

I joined this training with the aim of moving beyond just theoretical knowledge and actually building things
that work. In my college curriculum, we often study programming concepts and basic web technologies, but
this training was my chance to put everything together in one complete project. I wanted to experience how
professional developers take an idea and turn it into a working website or application.

The training was designed to take me through the entire development process, from creating the visual
layout that the user interacts with (frontend), to writing the logic that processes requests and data (backend),
and finally to managing and storing data in a database. By the end of the course, I wanted to be confident
enough to build a complete application on my own — whether it was for my own use, for freelance work, or
for a future employer.

Alongside technical skills, another important objective was to develop good problem-solving abilities. In
real-world projects, things rarely work perfectly on the first try, so I wanted to learn how to identify
problems, debug them, and find efficient solutions.
 Scope of the Work

The scope of my summer training was quite broad because Full-Stack Development covers multiple areas of
technology. This was not limited to just learning a programming language or framework — it was about
learning how to combine different technologies into one smooth system.

The frontend part of my work included HTML for structure, CSS for styling, and JavaScript for making
things interactive. Later, we moved to [Link], which is a powerful JavaScript library used to create single-
page applications that load quickly and feel smooth to the user.

The backend part involved learning [Link] and [Link]. [Link] allowed me to run JavaScript code on
the server side, and [Link] helped in building APIs and handling requests from the frontend.

For data management, I worked with MongoDB, a NoSQL database that stores data in a flexible, JSON-like
format. This database is widely used in modern applications because it handles large volumes of data
efficiently and allows changes without complicated migrations.

The scope also covered integration of all these parts, testing to ensure the application works as expected,
and finally deployment, which is the process of putting the application online so it can be accessed from
anywhere.
 Importance and Applicability

In today’s IT industry, having Full-Stack Development skills is a huge advantage. Many companies prefer
developers who can handle both the client-side and server-side of applications because it makes the team
more flexible and efficient.

The importance of this training was that it taught me not just how to code, but how to think like a developer.
I learned to plan features, design the layout, implement the backend logic, connect it to a database, and then
test and refine everything until it worked smoothly.

The knowledge I gained has direct applicability in multiple areas:

• Real-world Projects – I can now build personal projects like blogs, e-commerce websites, or portfolio sites
from scratch.

• Freelance Work – Many clients need small to medium web applications, and I now have the skills to
deliver them.

• Job Opportunities – Positions like Full-Stack Developer, Web Developer, or Backend Engineer are within
reach because I have practical knowledge in these areas.

• Entrepreneurship – If I want to start my own online platform in the future, I know how to build the core
product without hiring a large team at the start.
 Role and profile

During the training, my role was that of a learner and hands-on developer. Unlike a classroom environment
where the focus is mostly on theory and exams, here I had to practice coding every day.

I attended structured online classes where the instructor explained concepts step by step. After each concept,
I was given small coding exercises to try out what I had just learned. These exercises gradually increased in
difficulty so I could apply earlier lessons to new situations.

I also worked on mini-projects like:

• A personal portfolio website

• A to-do list app using React

• A simple REST API with [Link] and [Link] connected to MongoDB

Working on both the frontend and backend gave me real experience in connecting them through APIs and
handling data in a secure and efficient way. My profile during this time was that of a trainee focused on
learning industry-relevant technologies by doing, not just by reading or watching.

By the end of the training, I was not just familiar with the MERN stack — I could plan, build, test, and
deploy a complete web application on my own.
INTRODUCTION OF THE COMPANY/WORK

 Company’s Vision and Mission

Cipher Schools has a clear and inspiring vision — to make high-quality technical education accessible to
everyone, no matter where they are or what their background is. In today’s world, location and financial
limitations often prevent talented individuals from getting the right learning opportunities. Cipher Schools
aims to break this barrier by offering affordable, flexible, and skill-focused training that anyone can access
online.

Their mission goes beyond just teaching concepts. They want to equip learners with skills that are directly
usable in the industry. This is why their courses are not limited to theory; instead, they include practical,
project-based learning, where students build real applications as they progress through the course.

Another key part of their mission is to make learning engaging. They achieve this through clear video
lectures, real-life coding examples, live mentor support, and assignments that reflect the kind of work done
in tech companies. The training is designed to match current industry trends, so learners graduate with skills
that employers are actually looking for.
 Origin and growth of company

Cipher Schools started with a simple idea: to create an online platform where anyone could learn coding and
technology skills without the high costs or limitations of traditional education. Initially, the company offered
only a handful of courses focusing on basic programming and web development.

As more students joined and found value in the platform, Cipher Schools expanded both in size and scope.
They began partnering with experienced instructors from different parts of the world, which allowed them to
offer a wider range of courses. Today, they cover not just web development but also data science, design,
mobile app development, digital marketing, and more.

One of the reasons for their rapid growth has been their focus on quality and results. Instead of just
uploading videos, they built a platform where students can ask questions, get feedback, and even attend live
mentorship sessions. They also introduced features like career guidance, coding challenges, and hands-on
projects, which make the learning experience closer to real industry work.

Over the years, Cipher Schools has trained thousands of students, many of whom have gone on to secure
internships, jobs, or start their own businesses using the skills they learned. This reputation for delivering
practical, job-ready training has helped the company grow into one of the most recognized online learning
platforms in its space.
 Various departments and their functions

Like any successful organization, Cipher Schools is made up of multiple departments, each playing a
specific role in keeping the platform running smoothly:

1. Content Development Department – This team designs course materials, records lecture videos,
and creates practice assignments. They work closely with instructors to make sure the courses are
easy to understand, up to date with the latest technologies, and structured in a way that helps
students learn effectively.

2. Technical Development Department – This is the team that builds and maintains the Cipher
Schools learning platform. They make sure that the website and mobile apps are fast, reliable, and
user-friendly. They also handle bug fixes, develop new features, and integrate tools that improve the
overall learning experience.

3. Student Support Department – Learning online can sometimes be challenging, so this department
is there to help students with any issues they face, whether it’s technical problems, doubts about the
course content, or general guidance on how to progress.

4. Marketing and Outreach Department – This team is responsible for spreading the word about
Cipher Schools. They promote courses on social media, collaborate with influencers, build
partnerships with other organizations, and work to attract more learners from around the world.
 Organization chart of the company

The company follows a clear and efficient hierarchy:

CEO / Founder

Head of Content – Manages the course creation process and coordinates with instructors.
Head of Technical – Oversees the development and maintenance of the learning platform.
Head of Student Support – Ensures all students get timely help and guidance.
Head of Marketing – Directs campaigns to promote the brand and attract new learners.

This structure ensures that all parts of the business work together smoothly — from creating great courses to
delivering them effectively and making sure students get the help they need.
Brief description of the work done

 Position of Internship and roles

Although this was not an internship in the traditional sense where you work inside a company office, my
position during the summer training program was equivalent to that of a Full-Stack Development Trainee. In
this role, I was expected to follow a structured learning path, complete practical coding exercises, and work
on small projects that demonstrated my understanding of each topic.

The role involved acting as both a learner and a developer. On the learner side, I was responsible for
attending all the training sessions, going through the provided course materials, and watching the lecture
videos. On the developer side, I was tasked with applying the concepts from the lessons into actual projects
— just like a junior developer would do in a company setting.

I was also expected to self-manage my learning schedule, meet the deadlines for assignments, and maintain
consistent progress throughout the course. This role required discipline because online training depends
heavily on the learner’s dedication and time management skills.
 Activities/ equipment handled

During this training, I worked with several tools, technologies, and platforms that are used in professional
software development.

1. Frontend Tools and Activities:

• HTML & CSS – Used for creating the structure and styling of web pages.

• JavaScript – For adding interactivity to the pages, handling events, and manipulating the DOM.

• [Link] – Used to create reusable components, manage state using hooks, and implement routing for
single-page applications.

2. Backend Tools and Activities:

• [Link] – To run JavaScript on the server and handle requests from the client side.

• [Link] – For building REST APIs, routing requests, and managing server-side logic.

3. Database Tools and Activities:

• MongoDB – For storing data in a flexible JSON-like format.

• Mongoose – For defining schemas and interacting with MongoDB in an organized way.

4. Development & Collaboration Tools:

• Visual Studio Code – My main code editor for writing and testing code.

• Postman – To test backend APIs before integrating them with the frontend.

• Git & GitHub – For version control and managing project code.
5. Deployment Tools:

• Render / Vercel – Platforms for hosting and deploying my projects so they could be accessed online.

Activities included building mini-projects such as:

• A Personal Portfolio Website to showcase my work.

• A To-Do List Application in React for practicing state management.

• A User Registration API in [Link] and [Link] connected to MongoDB.


 Challenges faced and how those were tackled

Just like in a real job, learning through a structured course came with its share of challenges:

1. Understanding the Flow between Frontend and Backend


At first, it was confusing how data moved from a form in the frontend to being stored in the backend
database. The solution was to break the process down step-by-step:

 Submit form → Send request to API → Process request in [Link] → Store data in MongoDB.
I practiced this repeatedly until it became second nature.

2. Debugging Errors in Code


Sometimes a single missing character, such as a bracket or comma, would cause the whole application to
break. Initially, I would spend a lot of time searching randomly, but later I learned to use the browser
console and [Link] error messages effectively to pinpoint the problem.

3. Database Connection Issues


Connecting MongoDB to my backend was tricky at first. I had issues with the connection string and
environment variables. I solved this by reading official documentation and following the instructor’s
troubleshooting tips in the course.

4. Time Management
Since the training was self-paced, it was tempting to delay lessons. To overcome this, I created a fixed daily
schedule, dedicating at least two hours to watching videos and two hours to coding.
 Learning outcomes

The training gave me both technical skills and personal growth:

Technical Skills Gained:

• Ability to build full-stack applications using MERN stack.

• Understanding how frontend and backend communicate via APIs.

• Proficiency in database operations like Create, Read, Update, Delete (CRUD).

• Deployment skills to make my projects live on the internet.

Personal Skills Gained:

• Improved problem-solving through constant debugging.

• Better time management by creating a study and practice routine.

• Increased confidence in explaining technical concepts.

• Self-learning ability by researching topics outside the provided material.

By the end of the training, I could plan, develop, and deploy a working application entirely by myself.
 Data analysis

While working with MongoDB, I had to deal with storing, retrieving, and filtering data — just like
in real-world applications. For example:

• Storing user details from a registration form.


• Fetching data based on search filters.
• Sorting records for better display.

One exercise was to build a task management app where data from the user was saved to MongoDB,
retrieved for display in React, and updated or deleted as needed. This gave me a clear
understanding of how data flows through a full-stack application.

I also learned how to analyze application performance using console logs, API response times in
Postman, and browser developer tools. This helped in optimizing my code and making the
application run faster.
CONCLUSION

The summer training program at Cipher Schools in Full-Stack Development using the MERN stack has
been one of the most important and valuable learning experiences of my academic journey. Before starting
this training, I had only a basic understanding of how websites and web applications were made. I knew
about HTML, a little bit of CSS, and had touched JavaScript here and there. But I had never worked on
something that connected the frontend to a backend, or something that stored data in a database and allowed
users to interact with it in real time.

Over the course of this training, I have gone from being someone who only understood the theory behind
web development to someone who can actually create a complete, functional application from scratch. This
is a big transformation for me because it means I can now turn my ideas into working products.

Overall Learning Experience


From day one, the training was well-structured and easy to follow. The instructor started with the basics and
slowly introduced more complex concepts, so I never felt lost or overwhelmed. Each topic built upon the
previous one, and the practical exercises after every lecture helped me understand things more clearly.
I liked the fact that the course focused not only on what to do but also on why we do it in a certain way. For
example, while learning about APIs, it wasn’t just about writing the code — the trainer also explained why
APIs are necessary, how they improve communication between frontend and backend, and why REST APIs
are so commonly used.
By the time I reached the advanced topics, like integrating MongoDB with [Link] and deploying projects
online, I felt much more confident in my skills.

Technical Knowledge Gained

One of the biggest outcomes of this training is the technical skills I now have.

• On the frontend side, I learned how to structure a page using HTML, style it with CSS, and make it
interactive with JavaScript. [Link] was a completely new experience for me, and I enjoyed learning about
components, state, props, and hooks. React makes web applications faster and more dynamic, and now I
understand why it’s so popular.
• On the backend side, I learned [Link], which allows us to run JavaScript outside the browser, and
[Link], which makes server-side coding much easier. Before this, I had no idea how servers handled
requests and sent responses. Now I can set up my own server, handle routes, and process data.

• For databases, I learned MongoDB, which was different from traditional SQL databases. The flexibility of
storing data in JSON-like format made it easy to understand and use. I can now perform CRUD operations
confidently.

By combining all these skills, I can build a full-stack application where the user can enter information, the
backend can store and process it, and the frontend can display it dynamically.

Soft Skills Development


This training was not just about coding. It also improved my soft skills, which are equally important in the
workplace.
• Problem-solving: I faced errors and bugs in almost every project. At first, this was frustrating, but
over time I learned to enjoy the process of debugging and solving issues.
• Time management: Since the course was self-paced, I had to create my own schedule and stick to it.
• Communication skills: Even though the course was online, I interacted in discussion forums and
learned how to explain my problems clearly to get help.

Real-Life Applications of What I Learned


Everything I learned during the course has direct real-world applications. For example:

• I can build personal websites to showcase my work.


• I can create small business websites for clients.
• I can design interactive dashboards for displaying and analyzing data.
• I can create e-commerce platforms with product listings, shopping carts, and payment gateways.

These are not just ideas — they are actual possibilities now that I have the skills.

Self-Improvement

This training has changed the way I think about technology. Before, when I saw a professional website, I
used to wonder how so many features worked together. Now I can break it down in my mind and understand
what is happening in the frontend, backend, and database.

I also feel more confident about my career path. I know that with consistent practice, I can master these
technologies and take on real projects.
Future Goals

After completing this training, I have set a few goals for myself:
1. Build at least three complete projects to strengthen my portfolio.
2. Learn authentication and authorization for securing applications.
3. Explore Redux for advanced state management in React.
4. Contribute to open-source projects to gain real-world coding experience.

Industry Relevance

The MERN stack is widely used in the tech industry because it allows developers to build fast, scalable
applications using a single language — JavaScript. Companies value full-stack developers because they can
work on both client and server sides, reducing the need for separate specialists.

By learning MERN, I now have a skill set that is in demand, which will help me in job interviews,
internships, and even freelance opportunities.

Long-Term Benefits

This training has long-term benefits beyond just my final year of college:

 It will help me complete academic projects more efficiently.


 I can take on freelance work to earn and gain experience.
 I will be better prepared for technical interviews.

Final Reflection
Looking back, I am proud of the progress I made during this summer training. It required patience,
discipline, and dedication, but the results were worth it. The skills I gained will stay with me throughout my
career, and the confidence I built will push me to keep learning and improving.
I am grateful to Cipher Schools for providing this structured and well-organized training, and to my
instructors for explaining concepts in a way that was easy to understand. I am also thankful to Lovely
Professional University for encouraging practical training that prepares students for the industry.
The summer training I completed with Cipher Schools in Full-Stack Development using the MERN stack
was not just another online course. It was an important turning point in my learning journey. For the first
time, I got to connect everything I had been studying in college into one complete, practical workflow.

When I first enrolled in this training, my main thought was, “I know a little HTML and some JavaScript, but
can I really make a complete application?” I had seen many websites and apps, but the actual process of
creating them from scratch felt like a mystery. Over the weeks, that mystery slowly started to make sense,
piece by piece.

Overall Learning Journey


At the beginning, things started with the frontend basics — HTML, CSS, and JavaScript. These were not
new terms for me, but the way they were taught in the training made me understand them in more detail. For
example, I already knew that HTML creates the structure of a page, but I had never worked with semantic
HTML tags before. Now I understand why tags like <header>, <section>, and <footer> are better than just
using <div> everywhere — they make the code easier to read and help with SEO.
The CSS lessons were also a big improvement over what I knew before. Earlier, I used to just write inline
styles for quick changes. In the training, I learned how to properly use external stylesheets, work with
flexbox and grid layouts, and even add animations. My pages started to look cleaner and more professional.
JavaScript was where things really started to feel exciting. I began using it not just to pop up alerts or
change text, but to handle user input, validate forms, and manipulate DOM elements dynamically. For
example, in one exercise, I made a small counter app where the numbers increased or decreased when I
clicked buttons. It was a small task, but seeing the page respond instantly to my actions gave me a real sense
of control.

The Transition to React


When the training moved to [Link], I was both curious and nervous. I had heard from seniors that React
was powerful but also tricky for beginners. At first, I didn’t understand why we needed it — after all, I
could already make interactive pages with JavaScript. But as I followed the lessons, I saw the difference.
In plain JavaScript, if you have to update several parts of the page based on user input, you have to find
each element and change it manually. In React, you just update the state, and React takes care of updating
the page wherever that data is used. This “state and props” concept was new to me, and it took a few days to
fully understand. But once I got it, building interactive components became much easier.
One of my favorite exercises in React was creating a to-do list application. It was simple — add tasks, mark
them complete, delete them — but it taught me about component reusability, mapping arrays, and handling
events efficiently. Seeing my own app running in the browser, even if it was just a to-do list, was a big
confidence booster.

Stepping into Backend Development

The backend section of the training was where things felt completely new. I had never set up a server
before. Using [Link] and [Link], I learned how a server listens for requests and sends back responses.

At first, I found it confusing — especially when dealing with routes and middleware. I remember one day I
spent almost two hours trying to figure out why my POST request wasn’t working, only to realize I had
forgotten to include [Link]([Link]()) to handle JSON data. That frustration turned into satisfaction
once I fixed it and saw my API respond correctly.

The backend lessons also taught me how to separate logic into different files, keep code clean, and send
proper status codes along with responses. This was another thing I had never paid attention to before — that
an API doesn’t just send data, it also tells the browser whether the request was successful or failed.

Discovering MongoDB
Working with MongoDB was another big learning experience. Before this, I had only heard of MySQL,
which uses tables and rows. MongoDB felt more flexible because it stores data in JSON-like documents.
I practiced creating collections, inserting data, updating records, and deleting them. One of the exercises
was to store user registration data from a form into MongoDB. It was the first time I had ever built
something where the data stayed even after I closed the browser. That persistence — knowing that user
details were actually saved in a database — made the whole thing feel real.
Using Mongoose made things easier because I could define a schema and make sure all my data followed
the same structure.

Integrating Everything
The most exciting part of the training was when we started integrating the frontend, backend, and database
into one project. This is where the “Full-Stack” part really made sense.
I built a small application where users could submit data through a form in React. The data would be sent to
my [Link] backend via an API, stored in MongoDB, and then displayed back in the frontend. Seeing all
three layers work together gave me a complete picture of how real web apps function.
This integration phase also introduced me to CORS issues, API testing with Postman, and error handling.
Every problem I faced taught me something new — sometimes it was about fixing my own mistakes, and
other times it was about understanding how the internet works behind the scenes.

Deployment Experience
Learning to deploy my project online was like putting the final piece of the puzzle in place. I used Render to
host my backend and Vercel to host my frontend. Before deployment, I always thought hosting a website
was complicated and only big companies could do it. Now I know that anyone with the right tools can put
their project online.
The first time I opened my deployed project link on my phone and it worked perfectly, I felt proud. It was
proof that I could now create something and share it with anyone in the world.

Emotional Journey

This training was not just technical — it was also emotional. There were days when I felt frustrated because
nothing was working, but there were also moments of pure happiness when I finally solved a problem or
completed a project.
I learned that patience is one of the most important skills for a developer. You can’t rush the process. Some
bugs take minutes to solve, others take hours. But every problem has a solution if you keep looking.

Before and After

Before this training:

• I could only build static websites.

• I had no idea how servers worked.

• Databases were a mystery to me.

After this training:

• I can build dynamic, interactive websites.

• I understand how frontend and backend communicate.

• I can design and work with databases.

• I can deploy projects for public use.

This transformation in just a couple of months is the main reason I consider this training one of the best
decisions I have made in my academic life.
Deeper Reflections on My Training Experience

Building Confidence through Practice


One of the most important outcomes of this training was how much it boosted my confidence. At the start, I
was hesitant to even open a blank code editor. I used to think, “What if I get stuck? What if nothing works?”
But as the days went by and I kept coding, I realised that the more I practiced, the easier things became.
For example, in the early lessons, it took me almost an hour to build a simple HTML form. But by the end
of the course, I could create an entire page layout with HTML, style it with CSS, and add interactivity with
JavaScript in less than half an hour.
This confidence didn’t come from just watching videos — it came from writing code, making mistakes,
fixing them, and trying again. Each small success built my belief that I could handle bigger challenges.

Problem-Solving Mindset

Before this training, I would often give up too quickly when I encountered errors. If something didn’t work,
I would move on to something else. But in this training, there was no skipping — I had to face the problem
and solve it.

One time, while working on a [Link] API, my server kept crashing with an error I didn’t understand.
Instead of quitting, I decided to take it step by step:

1. I read the error message carefully.


2. I Googled the error code and found similar cases.
3. I tried the suggested solutions one by one.
4. Finally, I found out that the issue was because I was using an outdated package version.

This process taught me that problem-solving is a skill you develop over time, and it’s one of the most
valuable skills for a developer.

Working Independently
Even though the course was guided, I had to work independently most of the time. There was no teacher
physically standing over me — it was my responsibility to make sure I completed the lessons, practiced the
code, and understood the concepts.
This independence is very similar to what developers face in the real world. You might get some guidance
from a senior, but at the end of the day, you are the one who has to figure out the details and write the code.
I learned to manage my own study schedule. For example, I usually spent two hours in the morning
watching lessons and another two to three hours in the evening practicing and building projects. This routine
helped me stay consistent and avoid last-minute stress.
Connecting Theory with Practice

In college, we often learn theory about topics like “how the internet works” or “what a database is.” While
useful, these lessons sometimes feel disconnected from real coding.

During this training, I could apply these theories directly. For example:

• The HTTP request/response cycle wasn’t just a diagram in a textbook anymore — I actually wrote code to
send and receive requests.

• Database CRUD operations were no longer abstract concepts — I actually used them to store and update
real data in MongoDB.

This connection between theory and practice made learning much more interesting and gave me a clear
reason for why I was learning each topic.

Realizing the Power of MERN Stack

When I first heard about MERN stack, it just sounded like four different technologies put together. But now
I understand why it’s such a powerful combination:

• MongoDB handles flexible, large-scale data storage.

• [Link] makes backend development easier and faster.

• [Link] makes the frontend dynamic and interactive.

• [Link] allows JavaScript to run on the server, so you don’t need multiple programming languages.

The best part is that everything is in JavaScript, which makes it easier to move between frontend and
backend without constantly switching [Link] Projects and Their Impact throughout the course, I
built several mini-projects. Even though they were small, they played a big role in building my confidence
and understanding.

1. Personal Portfolio Website

Purpose: To showcase my work.

Skills learned: HTML structure, CSS styling, and responsive design.

2. To-Do List App in React

Purpose: Practice state and props.

Skills learned: Event handling, mapping lists, component reusability.


3. User Registration API

Purpose: Learn backend basics.

Skills learned: Express routing, handling POST requests, MongoDB integration.

4. Full MERN Application

Purpose: Integrate all technologies.

Skills learned: Connecting frontend to backend, managing API calls, deploying apps.

Every project gave me a sense of achievement and kept me motivated to continue learning.

Facing and Overcoming Challenges

The journey was not without challenges. There were moments when I felt stuck and wondered if I was cut
out for full-stack development. But every time I solved a problem, I felt stronger and more capable.

Some examples:

 A CORS error while connecting React to [Link] backend — solved by enabling CORS middleware.
 A deployment issue on Render — solved by checking build scripts and environment variables.
 A MongoDB connection timeout — solved by ensuring the correct IP address was whitelisted in the
database settings.

These small victories gave me the belief that I can face any technical problem as long as I stay patient and
keep searching for solutions.

The Change in My Approach

Before this training, I used to think coding was about memorizing syntax. Now I know it’s about
understanding logic and problem-solving. If I forget syntax, I can always look it up. But the way to
approach a problem and break it into smaller steps is something you learn only through practice. This
change in mindset is one of the biggest takeaways for me.
Industry Relevance of MERN Stack
During the training, I realized just how valuable the MERN stack is in today’s job market. Many of the
applications we use daily — from social media platforms to online shopping websites — are built using
technologies similar to MERN.

Companies prefer the MERN stack for several reasons:

1. Single Language Development – The same language, JavaScript, is used for both frontend and backend,
which makes the development process smoother and easier to manage.

2. Scalability – MERN stack applications can handle a large number of users and data without slowing
down, which is essential for modern businesses.

3. Active Community Support – If you face an issue, there’s almost always a solution available online
because so many developers use these technologies.

4. Fast Development Cycle – Libraries and frameworks in MERN save time and allow rapid prototyping.
When I searched job portals out of curiosity, I noticed that “Full-Stack Developer” and “MERN Stack
Developer” are among the most in-demand roles. Knowing that I now have skills in these areas gives me
more confidence about my future career.

How This Training Prepares Me for Jobs


This training has given me something very important — job readiness.
It’s one thing to know a programming language and another thing to be able to use it to solve real-world
problems. Through the projects and exercises in this training, I learned how to:

• Plan and design an application.


• Write clean and organised code.
• Test features before deploying them.
• Deploy a working project so that users can access it online.

These are exactly the kind of skills companies look for in new hires. If I were to join a team tomorrow, I
could immediately start contributing to both frontend and backend work without needing months of extra
training.

Long-Term Benefits
The benefits of this training go beyond just immediate job opportunities:

1. Stronger Final-Year Project – With MERN stack knowledge, I can create a more impressive final-year
project that could even be deployed for real-world use.
2. Freelance Opportunities – Small businesses often need simple web applications, and I now have the skills
to build them for clients.

3. Foundation for Advanced Learning – MERN stack is a great starting point for learning advanced concepts
like cloud deployment, microservices, and serverless architecture.

4. Career Flexibility – Whether I want to work in a startup, a large company, or even start my own business,
full-stack development skills are valuable in all scenarios.

Future Plans and Goals


Completing this training has motivated me to set clear goals for my development journey:

• Build a Strong Portfolio – I want to create at least five complete projects, each demonstrating a different
skill, such as e-commerce features, authentication, and data visualisation.

• Learn Authentication and Security – Implementing secure login systems using JWT (JSON Web Tokens)
or OAuth will make my applications more professional.

• Master State Management – Learning Redux will help me manage complex application states in React.

• Contribute to Open Source – By contributing to open-source projects, I can gain more real-world
experience and connect with other developers.

• Prepare for Technical Interviews – I plan to practice coding problems regularly so that I can perform well
in job interviews.

Final Emotional Reflection


Looking back, this training was not just a technical course — it was a personal journey. There were days of
frustration when the code didn’t work and moments of pure joy when everything finally came together.
I learned patience. I learned how to search for solutions instead of giving up. I learned that every small step
forward matters, and that progress is built over time, not in a single day.
The moment I opened my first fully deployed MERN project on my phone and showed it to my friends was
a proud moment. It wasn’t just about the app itself — it was about proving to myself that I could set a goal,
work consistently, and achieve it.
I am thankful to Cipher Schools for designing a course that is both structured and practical, and to Lovely
Professional University for encouraging students to take such industry-relevant training.
This is just the beginning of my journey in the tech world, but now I have the skills, the confidence, and the
mindset to keep moving forward.
Self-Learning Project: Judicial Chatbot

Background & Motivation


While learning the MERN stack during my summer training, I was inspired to test my skills on something
unique and socially useful. I didn’t just want to create another to-do list app or weather dashboard — I
wanted to build something that could solve a real-world problem.
In India, legal awareness among citizens is still low. Many people have doubts about laws, rights, or
processes but hesitate to visit a lawyer for basic queries. They often rely on unverified internet sources or
hearsay, which can lead to misunderstandings.
That’s when I thought: What if I could create a chatbot that answers basic legal questions in simple,
everyday language? This idea became the Judicial Chatbot.
The goal was clear — bridge the gap between legal information and the general public by using technology
to deliver instant, clear, and accurate responses.

Detailed Technical Architecture


The Judicial Chatbot was designed as a full-stack web application using the skills I learned during my
training. Here’s the breakdown:

• Frontend:

- [Link] for building the user interface


- CSS for styling and responsiveness
- Axios for sending HTTP requests to the backend

• Backend:
- [Link] as the runtime environment
- [Link] for creating REST APIs
- NLP keyword-matching logic for processing user queries

• Database:
- MongoDB for storing predefined legal FAQs and answers
- A collection for storing “unanswered” queries for future training

• Deployment:
- Frontend hosted on Vercel
- Backend hosted on Render
- MongoDB Atlas for the database

Frontend Development Process


I started by sketching a minimalist chat interface — nothing flashy, just clean and functional. The idea was
to make it look professional and approachable for all age groups.

• Chat Bubbles: Incoming and outgoing messages appear as bubbles, similar to WhatsApp.
• Auto Scroll: The view scrolls automatically when new messages appear.
• Mobile Friendly: Tested on different screen sizes to ensure proper scaling.

I spent extra time making the input box easy to use — it remains fixed at the bottom, with a clear “send”
button so that even first-time users don’t feel lost.

Backend Logic & APIs


The backend was the brain of the chatbot. I created three main API endpoints:
1. POST /ask – Accepts user queries, processes them, and returns the best-matched answer.
2. GET /faq – Returns all stored questions and answers for admin review.
3. POST /feedback – Allows storing user suggestions for improvement.

The logic for matching answers was kept simple in the first version:
• Convert the user query to lowercase.
• Search for matching keywords in the database.
• If a match is found, return the associated answer.
• If no match, store the query in the “unanswered” collection.

Database Structure & Example Data

The database was divided into two collections:

 faqs

json
CopyEdit
{
"category": "Criminal Law",
"question": "What is the procedure for filing an FIR?",
"answer": "To file an FIR, visit the nearest police station, provide details of the incident in writing, and ensure you receive a
copy of the FIR."
}

 unanswered

json
CopyEdit
{
"userQuery": "What is the punishment for cheque bounce?",
"timestamp": "2025-07-20T10:30:00Z"
}

This structure ensures that unanswered questions can be added to the database later, improving the chatbot
over time.
Deployment Challenges
Deploying the chatbot taught me lessons I hadn’t faced in local development:
• Backend Cold Starts: Render takes time to “wake up” backend services if unused for a while.
• CORS Issues: I had to configure backend headers properly so the frontend could connect without errors.
• Environment Variables: Database connection strings and API keys had to be stored securely.
After some trial and error, I successfully hosted both frontend and backend and connected them to the cloud
database.

User Experience Walkthrough

1. Landing on the Page:


The chatbot greets users with a friendly welcome message.

2. Asking a Question:
Users type queries like “How can I apply for bail?”

3. Receiving an Answer:
The bot responds with a short, clear, legally accurate answer.

4. Fallback Handling:
If the bot doesn’t know, it politely says so and saves the question for future updates.

This made the experience helpful but also honest — the bot never pretends to know
something it doesn’t.

Testing & Feedback

I shared the link with friends and family, asking them to try random questions. This helped identify:

 Commonly used phrases that weren’t in my database.


 Cases where similar-sounding questions should have the same answer.
 UI suggestions like making the chat box bigger and adding timestamps.

Based on feedback, I improved keyword matching and added new FAQs.


Future Expansion Plans

• Advanced NLP: Integrating a machine learning model for better understanding of varied
questions.
• Voice Input: Allowing users to speak their queries instead of typing.
• Multilingual Support: Adding Hindi and Punjabi for wider reach.
• Admin Panel: To easily update questions and answers without touching the database
manually.

Personal Reflection
This project gave me confidence that I could take an idea, turn it into a real working application, and share it
with the world. Seeing it live at [Link] felt like a milestone.

It taught me:
• How to integrate everything I learned in my MERN stack course into a real project.
• How to deploy full-stack apps to production.
• How to gather user feedback and improve iteratively.

Most importantly, it showed me that self-learning combined with formal training can produce meaningful,
impactful projects.
Judicial Chatbot system is a modern AI-powered judiciary platform designed to make legal processes more
efficient, transparent, and accessible. It acts as a virtual legal assistant, capable of handling basic legal
queries, assisting judges and lawyers with case-related information, and maintaining accurate case records.
The platform combines artificial intelligence, natural language processing, and secure storage mechanisms
to ensure that legal proceedings are supported by fast and reliable data.
In traditional legal workflows, a large amount of time is spent searching for past cases, drafting hearing
summaries, and managing documentation. The Judicial Chatbot reduces these delays by automating
repetitive tasks and providing instant access to legal references. This makes it useful not only for lawyers
and judges but also for common citizens seeking basic legal guidance.

System Overview
The system operates as an integrated platform with several key functions:
Case Management – Judges and lawyers can log in to enter case details, upload related documents, and
update hearing progress.
AI-Powered Legal Search – Once case details are entered, the system cross-references them with a pre-built
legal database containing laws, past judgments, and case summaries.
Sentiment Analysis – An AI module analyses the text of case proceedings, lawyer arguments, and judge’s
remarks to detect sentiment and tone. This helps in understanding the direction of the case.
Automated Report Generation – After each hearing, the system generates a structured report summarizing
the events, arguments, and notable points raised.
Secure Record Storage – All case details and hearing reports are stored in a blockchain-inspired ledger
system, ensuring that records are tamper-proof and transparent.
Prediction Assistance – Using historical data, the system can predict possible outcomes or suggest similar
past cases for reference.

Key Functional Modules

User Interface:
The chatbots is accessible through a web or mobile application.
Judges have access to detailed case history, hearing notes, and sentiment reports.
Lawyers can upload evidence, review related cases, and track hearing schedules.
Citizens can ask basic legal questions, such as “What is the procedure for filing an FIR?” or “How can I
apply for bail?”

AI and NLP Engine:


Uses Natural Language Processing to understand user queries and extract relevant keywords.
Identifies legal terms and matches them to relevant sections of the legal database.
Analyses tone in judge’s statements and hearing transcripts to identify sentiment trends.
Legal Database Integration:
Contains digitized laws, acts, regulations, and court judgments.
Indexed for quick search, allowing instant retrieval of relevant sections.

Case Recording and Summarization:


Every time a hearing is completed, the system generates a structured summary.
Summaries are written in clear and simple language for easy understanding.
Summaries include:
Date and time of hearing
Judge and lawyers involved
Key points of discussion
Decisions or orders made

Benefits of the Judicial Chatbot


Time-Saving – Judges and lawyers no longer waste hours searching for references.
Transparency – Blockchain-like storage ensures that hearing records are tamper-proof.
Accuracy – AI ensures that legal references and summaries are precise and relevant.
Prediction Support – Sentiment trends and case similarity help in preparing strategies.
Public Access – Citizens can easily get answers to common legal questions without visiting a court.

Example Use Case

Case: A citizen files a complaint about land dispute.

1. The lawyer logs into the platform and enters case details.
2. The AI cross-references similar land dispute cases from the past 10 years.
3. The judge reviews the AI-generated list of judgments and their summaries before the hearing.
4. During the hearing, the AI analyses the conversation and detects that the judge’s sentiment is neutral
but leaning towards the complainant’s evidence.
5. After the hearing, the AI automatically generates a report summarizing all discussions.
6. The report is securely stored, and all parties can access it for future reference.

Future Scope

The Judicial Chatbot system can be expanded to:

 Support multiple languages for regional accessibility.


 Integrate with government databases for instant document verification.
 Provide AI-powered drafting assistance for legal notices and petitions.
 Allow public hearings to be live-streamed with AI-generated captions/
Conclusion

The Basic Judicial Chatbot system is not just a chatbot — it is a comprehensive AI-powered legal assistant.
By combining case management, AI-driven analysis, and secure data storage, it offers an innovative
approach to modernizing judicial processes. It reduces delays, improves accuracy, and ensures transparency
— ultimately contributing to a more efficient and accessible justice system.
REFERENCES

References
1. Cipher Schools – Full Stack Development using MERN Stack (Hybrid). Available at:
[Link] (Accessed on 5 August 2025)
2. React Official Documentation – Learn React Basics and Advanced Concepts. Available at:
[Link] (Accessed on 20 July 2025)
3. [Link] Official Documentation – [Link] v20.x Documentation. Available at:
[Link] (Accessed on 20 July 2025)
4. [Link] Guide – Express Web Framework Documentation. Available at: [Link]
(Accessed on 21 July 2025)
5. MongoDB Documentation – MongoDB CRUD Operations, Schema Design, and Aggregation.
Available at: [Link] (Accessed on 22 July 2025)
6. MDN Web Docs – HTML, CSS, and JavaScript Reference. Available at:
[Link] (Accessed on 10 July 2025)
7. GitHub – Using Git and GitHub for Version Control. Available at: [Link]
(Accessed on 25 July 2025)
8. Postman Learning Center – API Testing and Debugging Guide. Available at:
[Link] (Accessed on 26 July 2025)

You might also like