In the world of web development, databases play a pivotal role in storing and managing data efficiently. Among the myriad of choices available, PostgreSQL stands out as a powerful, open-source relational database system. When combined with the flexibility and versatility of Node.js, a robust and scalable backend solution can be crafted. In this guide, we’ll explore the process of connecting Neondb with a Node.js application, offering a clear path for developers seeking an efficient data storage solution.

Why PostgreSQL?

1. Open Source and Community-Driven:

• PostgreSQL is an open-source database with a rich history and a vibrant community. Its community-driven development ensures continuous improvement, security updates, and feature enhancements.

2. ACID Compliance:

• PostgreSQL adheres to the ACID (Atomicity, Consistency, Isolation, Durability) properties, ensuring reliability and data integrity in even the most complex transactions.

3. Extensible and Customizable:

• The extensibility of PostgreSQL allows users to define their data types, operators, functions, and aggregates, offering a level of customization that’s crucial for diverse application requirements.

4. Scalability and Performance:

• Whether you’re dealing with small-scale projects or enterprise-level applications, PostgreSQL’s architecture is designed for scalability. Its performance capabilities shine, particularly in scenarios with a high volume of concurrent transactions.

What is NeonDB ?

NeonDB, also known as Neon, is a serverless, open-source alternative to traditional database-as-a-service (DaaS) offerings like AWS Postgres. It utilizes a unique architecture that separates compute and storage, granting it several advantages over its competitors.

Why neon ?

• Serverless: NeonDB eliminates the need for you to manage and provision database servers. This allows you to focus on your application development and saves you time and resources.
• Scalable: NeonDB can automatically scale up or down based on your needs, ensuring that you always have the right amount of resources available.
• Fault-tolerant: NeonDB is designed to be highly fault-tolerant, with automatic failover and data replication.
• Branchable: NeonDB supports database branching, which allows you to create multiple versions of your database for development, testing, and production purposes.
• Cost-effective: NeonDB is priced based on usage, so you only pay for the resources you use.

Lets start with the step by step guide :

1. Make account on https://neon.tech/

2. Create a free project, create a database !

3. Create a new Database, name it whatever you want! (i am naming it as ‘test’)

4. copy the connection string for the same

5. Using a library that let’s you connect and put data in it

pg is a Node.js library that you can use in your backend app to store data in the Postgres DB (similar to mongoose). We will be installing this eventually in our app.

6. Connecting db with NodeJS

6.1 : Initialize empty NodeJS app

npm init -y

6.2 : Install pg

pg is a Node.js library that you can use in your backend app to store data in the Postgres DB (similar to mongoose). We will be installing this eventually in our app.

npm install pg

6.3 : Connect Database client : ( paste your connectionString )

import { Client } from "pg";

const client = new Client({
  connectionString:"postgresql://sanketsj00900:************@ep-holy-forest-a51n3thp.us-east-2.aws.neon.tech/test?sslmode=require"
})

client.connect();

7. Creating Table by defining schema

Tables in SQL :

Tables are database objects that contain all the data in a database. In tables, data is logically organized in a row-and-column format similar to a spreadsheet. Each row represents a unique record, and each column represents a field in the record.

Please refer below article to know about different attributes and keys in detail :

SQL CREATE TABLE Statement

Using Nodejs to manipulate PostgreSQL Data:

CRUD Operations :

C — Create Table, Database

R — Read data from database

U — Update data from database

D — Delete data from database

1. Create Table

const { Client } = require('pg')
 
const client = new Client({
  connectionString:"postgresql://sanketsj00900:************@ep-holy-forest-a51n3thp.us-east-2.aws.neon.tech/test?sslmode=require";
})

// Function to create a users table in database.
async function createUsersTable() {
    await client.connect()
    const result = await client.query(`
        CREATE TABLE users (
            id SERIAL PRIMARY KEY,
            username VARCHAR(50) UNIQUE NOT NULL,
            email VARCHAR(255) UNIQUE NOT NULL,
            password VARCHAR(255) NOT NULL,
            created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
        );
    `)
    console.log(result)
}

createUsersTable();

Output :

You can easily see tables from test -> tables, and yes users table is created succesfully!

2. Inserting data into the table

async function insertData() {
  try {
    await client.connect(); // Ensure client connection is established
    const insertQuery =
      "INSERT INTO users (username, email, password) VALUES ('username1', 'user1@example.com', 'user1_password');";
    const res = await client.query(insertQuery);
    console.log("Insertion success:", res); // Output insertion result
  } catch (err) {
    console.error("Error during the insertion:", err);
  }
}

Output :

Entry is inserted succesfully !

But, there is one issue in this approach

This is an insecure way to store data in your tables. When you expose this functionality eventually via HTTP, someone can do an SQL INJECTION to get access to your data/delete your data.

More secured way : don’t put user provided fields (ie. username, password, eamil) in the SQL string

Solution :

const insertQuery = 'INSERT INTO example_table(column1, column2) VALUES($1, $2)';
const res = await client.query(insertQuery, [column1Value, column2Value]);

More secured way of interting data :

async function insertData(username, email, password) {
  try {
    await client.connect();
    // Use parameterized query to prevent SQL injection
    const insertQuery =
      "INSERT INTO users (username, email, password) VALUES ($1, $2, $3)";
    const values = [username, email, password];
    const res = await client.query(insertQuery, values);
    console.log("Insertion success:", res); // Output insertion result
  } catch (err) {
    console.error("Error during the insertion:", err);
  }
}

// createUsersTable();
insertData("user2", "user2@gmail.com", "user2_pass");

3. reading data from database

async function getData() {
  await client.connect();
  const res = await client.query(`SELECT * FROM users`);
  console.log(res);
  return res;
}

Output :

4. Updating data from database

async function updatePass(username, newPass) {
  await client.connect();
  const updateQuery = `UPDATE users SET password = $2 WHERE username = $1`;
  const values = [username, newPass];
  const res = await client.query(updateQuery, values);
  console.log(res);
  return res;
}

updatePass("user2", "updates2_pass");

4. Deleting data from database

async function deleteUser(username) {
  await client.connect();
  const deleteQuery = `DELETE FROM users WHERE username = $1`;
  const res = await client.query(deleteQuery, [username]);
  console.log(res);
  return res;
}

deleteUser("user2");

Output :

Updated Database :

So, this was the beginner’s guide about connecting the database, and manipulating data by doing CRUD operations !

If you like this particular blog, please follow Sanket Jagdale! and stay tuned for more such amazing blogs !

Hashing and salting passwords is important for security reasons. When users create accounts on websites, their passwords should be stored securely to prevent unauthorized access in case the database is compromised. Here’s why hashing and salting are crucial:

1. Password Hashing:

• Security: Hashing is a one-way process, making it difficult for attackers to reverse-engineer the original password from the hash.
• Consistency: Hashing ensures that the stored password is consistently represented in a fixed-size hash format, regardless of the length or complexity of the original password.

2. Salting:

• Uniqueness: Salting involves adding a random value (salt) to each password before hashing. This ensures that even if two users have the same password, their hashes will be different due to the unique salt.
• Defense Against Attacks: Salting helps defend against precomputed attacks, rainbow table attacks, and other types of attacks that attempt to guess passwords by using precomputed hashes.

Here’s how you can hash and salt passwords in Node.js with Express using the bcrypt library:

1. Install bcrypt livrary

npm install bcrypt

2. File structure

-backend
-index.js
- db.js
— routes
 — — user.js

3. Connect express and mongoose and create userSchema

const mongoose = require("mongoose");
const bcrypt = require("bcrypt");
const MONGO_URL = process.env.MONGO_URL;
mongoose.connect(MONGO_URL);


const userSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true,
    trim: true,
    lowercase: true,
    minLength: 3,
    maxLength: 30,
  },
  password: {
    type: String,
    required: true,
    minLength: 6,
  },
  firstName: {
    type: String,
    required: true,
    trim: true,
    maxLength: 50,
  },
  lastName: {
    type: String,
    required: true,
    trim: true,
    maxLength: 50,
  },
});


const User = mongoose.model("User", userSchema);

module.exports = {
  User,
};

4. In db.js , Write createHash and validatePassword for generating hash from password and validate it.

const userSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true,
    trim: true,
    lowercase: true,
    minLength: 3,
    maxLength: 30,
  },
  password: {
    type: String,
    required: true,
    minLength: 6,
  },
  firstName: {
    type: String,
    required: true,
    trim: true,
    maxLength: 50,
  },
  lastName: {
    type: String,
    required: true,
    trim: true,
    maxLength: 50,
  },
});


// -------------------------- bcrypt methods ---------------------------- // 

//* Method to generate a hash from plain text

userSchema.methods.createHash = async function (plainTextPassword) {

  // Hashing user's salt and password with 10 iterations,
  const saltRounds = 10;

  // create salt and hash
  return await bcrypt.hash(plainTextPassword, saltRounds);
};

//* Validating the candidate password with stored hash and hash function

userSchema.methods.validatePassword = async function (candidatePassword) {
  return await bcrypt.compare(candidatePassword, this.password);
};

// -------------------------- bcrypt methods ---------------------------- //

const User = mongoose.model("User", userSchema);

module.exports = {
  User,
};

5. In routes/user.js define signin and signup routes

const express = require("express");
const zod = require("zod");
const { User } = require("../db.js");
const jwt = require("jsonwebtoken");

const JWT_SECRET = process.env.JWT_SECRET;

const router = express.Router();

const signupBody = zod.object({
  username: zod.string().email(),
  firstName: zod.string(),
  lastName: zod.string(),
  password: zod.string(),
});

//* Route : .../api/v1/user/signup
router.post("/signup", async (req, res) => {
  try {
    const { success } = signupBody.safeParse(req.body);

    if (!success) {
      return res.status(411).json({
        message: "Invalid Inputs ! ",
      });
    }

    const existingUser = await User.findOne({
      username: req.body.username,
    });

    if (existingUser) {
      return res.status(411).json({
        message: "User already exists !",
      });
    }

    const newUser = new User({
      username: req.body.username,
      password: req.body.password,
      firstName: req.body.firstName,
      lastName: req.body.lastName,
    });

    var hashedPassword = await newUser.createHash(newUser.password);
    newUser.password = hashedPassword;

    await newUser.save();

    const userId = newUser._id;

    const token = jwt.sign(
      {
        userId,
      },
      JWT_SECRET
    );

    res.json({
      message: "User created successfully",
      token: token,
    });
  } catch (error) {
    console.error(error);
    res.status(500).json({
      message: "Internal Server Error",
    });
  }
});

//?----------------------------------------------?//

const signinBody = zod.object({
  username: zod.string().email(),
  password: zod.string(),
});

//* Route : .../api/v1/user/signin

router.post("/signin", async (req, res) => {
  const { success } = signinBody.safeParse(req.body);

  if (!success) {
    return res.status(411).json({
      message: "Username Already taken / Invalid Inputs !",
    });
  }

  const user = await User.findOne({
    username: req.body.username,
  });

  if (user) {
    if (await user.validatePassword(req.body.password)) {
      const token = jwt.sign(
        {
          userId: user._id,
        },
        JWT_SECRET
      );

      res.json({
        token: token,
      });
      return;
    } else {
      return res.status(400).json({
        message: "Incorrect Password",
      });
    }
  }
});

module.exports = router;

Once we write the code, we can test it using Postman or VS code extension called thunderclient . Lets test this out !

Start the server using npx nodemon index.js

Lets first hit signnup route !

Lets give some inputs in body !

Here you can see the new user and respective JWT token is created. Also the new entry is added into the database.

The thing to notie here is, the stored password is hashed !

Now lets test out the signin route !

So this is how you can easily hash your passwords using bcrypt !

If you liked this blog, Do follow Sanket Jagdale !

What exactly do we mean when we say “Frontend”?

Frontend development, also known as client-side development, is the practice of creating the visual and interactive components of a website or application that users see and interact with.

In the web development process, front-end development comes after the design stage and before the back-end development stage. The frontend developer takes the design files (typically created in tools like Adobe Photoshop or Sketch) into functional, interactive web pages using programming languages such as HTML, CSS, and JavaScript.

Frontend developers also use various tools and frameworks to streamline their workflow and make the development process more efficient. Some popular front-end frameworks include React, Angular, and Vue.js.

Importance of Frontend :

1. User experience: The frontend is the user’s first point of contact with a website or application, and it determines how the user interacts with the site. A well-designed frontend that is easy to use and aesthetically pleasing can greatly enhance the user experience and keep users engaged.
2. Responsiveness: With the increasing use of mobile devices, it is essential that websites and applications are designed to be responsive to different screen sizes. Frontend development plays a crucial role in ensuring that websites and applications are optimized for mobile devices and provide a seamless user experience across all devices.
3. Accessibility: Frontend development can also improve the accessibility of websites and applications for users with disabilities. Using accessible design practices, such as semantic HTML and ARIA (Accessible Rich Internet Applications) attributes, frontend developers can ensure that their websites and applications are usable by a wider audience.
4. SEO: A well-designed frontend can also improve the search engine optimization (SEO) of a website or application. By using proper HTML tags, structured data, and semantic markup, frontend developers can help search engines better understand the website's content and improve its visibility in search engine results pages.
5. Performance: The frontend can also affect the performance of a website or application. By optimizing the code, minimizing the number of requests, and using efficient design practices, frontend developers can improve the performance of the website and provide a faster and smoother user experience.
6. Brand identity: The frontend design is also important for establishing and maintaining a brand’s identity. A consistent design language and visual style across a website or application can help to reinforce a brand’s identity and make it more memorable to users.

Timeline of the evolution

This timeline shows how the initial technologies of HTML, CSS, and the DOM were followed by the addition of JavaScript for interactivity and AJAX for faster loading. Then came the rise of responsive design and CSS frameworks, followed by the shift towards component-based architecture and the emergence of newer CSS technologies like grid/flexbox and CSS variables. More recent additions to the frontend ecosystem include Web Components, PWA, and WebGPU.

Frontend development has come a long way since the early days of the World Wide Web. From basic HTML and CSS to complex component-based frameworks, the evolution of frontend development has been driven by a desire to create more engaging, interactive, and user-friendly web applications. Here’s a closer look at the different stages of frontend development:

A. 1990s: HTML and CSS

In the early days of the web, frontend development consisted primarily of creating simple static pages using HTML and CSS. HTML provided the structure of the page, while CSS was used for styling and layout. These basic tools were sufficient for creating basic websites, but they were limited in terms of interactivity and dynamic content.

B. 2000s: JavaScript

With the advent of JavaScript in the early 2000s, frontend development took a major leap forward. JavaScript made it possible to create more interactive and dynamic web applications, with features like animations, pop-ups, and form validation. JavaScript frameworks like jQuery made it easier to write complex code, and libraries like React and Vue allowed developers to build complex web applications with ease.

C. 2010s: Responsive Design

The rise of mobile devices in the 2010s led to a renewed focus on responsive design. Responsive design is a design approach that ensures that web applications look and function well on any device, regardless of its screen size or orientation. This was accomplished through the use of fluid layouts, flexible images, and CSS media queries.

D. 2020s: Component-based Frameworks

In recent years, frontend development has moved towards component-based frameworks. These frameworks provide a modular approach to building web applications, with reusable components that can be combined to create complex interfaces. Examples of component-based frameworks include Angular, React, and Vue.

The Future of Frontend:

The future of frontend web development is expected to be driven by a combination of emerging technologies, user demands, and developer efficiency. It will continue to evolve rapidly, providing exciting opportunities and challenges for frontend developers to create innovative and user-friendly web applications. Staying updated with the latest trends and technologies and continuously improving skills will be crucial for frontend developers to thrive in the ever-evolving web development landscape.

WebAssembly

WebAssembly (often abbreviated as wasm) is a binary instruction format for a stack-based virtual machine. It is designed as a low-level virtual machine that runs code at near-native speed, making it a powerful technology for frontend web development. Here are some potential future developments for WebAssembly in frontend web development:

1. Increased Adoption: WebAssembly has gained significant momentum since its introduction, and it is expected to continue to grow in adoption.

2. Broader Language Support: Currently, WebAssembly supports several programming languages, including C/C++, Rust, and Go.

AI and ML

The intersection of frontend web development with Artificial Intelligence (AI) and Machine Learning (ML) is an exciting area with significant potential for the future. Here are some key areas where AI and ML may impact frontend web development:

1. Personalized User Experiences: AI and ML technologies can analyze user behavior, preferences, and data to create personalized user experiences on the frontend.

2. Chatbots and Virtual Assistants: AI-powered chatbots and virtual assistants can be integrated into frontend web applications to provide interactive and dynamic interactions with users.

Progressive Web Apps (PWAs):

PWAs are web applications that function like native apps, providing a rich user experience with offline capabilities, push notifications, and seamless updates. PWAs are becoming increasingly popular due to their ability to offer a fast, engaging, and app-like experience on the web, and are likely to play a significant role in the future of frontend web development.

1. Enhanced Offline Capabilities: PWAs are known for their offline capabilities, allowing users to access content and features even without an internet connection.

2. Improved Performance: Performance is a critical factor for web applications, including PWAs.

Challenges and Opportunities

In today’s digital age, front-end development has become an essential component of building any successful web application or website. Frontend development involves designing and developing the visual elements of a web application or website that users interact with. It is the bridge between the user interface and the backend functionality of the application. However, front-end development comes with its own set of challenges and opportunities.

Challenges:

Limited technology: In the early days of frontend development, the technology was limited, which made it difficult to create dynamic and responsive web pages. Developers had to work with basic HTML, CSS, and JavaScript, which made it difficult to create complex layouts and interactions.

Limited tools: There were very few tools available to developers for testing and debugging, which made it difficult to identify and fix errors in code. Developers had to rely on manual testing, which was time-consuming and error-prone.

Browser compatibility: Different browsers had different ways of rendering web pages, which made it challenging to ensure that a website looked and functioned correctly across different browsers. Developers had to create browser-specific hacks and workarounds, which made the codebase more complex.

Lack of standards: In the early days, there were no industry standards for web development, which made it difficult to create consistent and reliable web pages. Developers had to rely on best practices and trial-and-error to figure out what worked and what didn’t.

Performance optimization: Performance optimization is a critical aspect of frontend development. Slow-loading web applications and websites can lead to poor user experience and lost revenue. Ensuring fast load times requires frontend developers to consider various factors such as file size, caching, and rendering time.

Opportunities:

Innovation: Early frontend development was a time of innovation, as developers were experimenting with new ways of creating web pages. This led to the creation of new techniques and tools that are still in use today.

Learning: With limited technology and tools, developers had to be creative and resourceful in solving problems. This led to a deep understanding of the underlying technologies and a strong foundation in the fundamentals of web development.

Flexibility: With no industry standards, developers had the flexibility to create web pages in their own way, which allowed for a lot of creativity and experimentation.

Impact: With the internet still in its early days, early frontend developers had the opportunity to create websites and web applications that had a significant impact on people’s lives. This inspired a generation of developers to continue pushing the boundaries of what was possible with web development.

Overall, early frontend development was a challenging but exciting time for developers. The limitations and challenges of the time pushed developers to be more innovative and creative, which laid the foundation for the modern web development industry.

Conclusion

In conclusion, the evolution of frontend development has been a gradual and continuous process, starting from the foundational technologies of HTML, CSS, and the DOM, and progressing towards more advanced and complex technologies like Web Components, PWA, and WebGPU. As technology has advanced, so has the frontend ecosystem, with each new technology building on the foundations of the previous ones. This evolution has led to the creation of more dynamic, responsive, and interactive web applications, which have become an integral part of our daily lives. The frontend development landscape is constantly evolving, and as new technologies continue to emerge, it will be interesting to see how they shape the future of web development.

Written By :

Suraj Jadhav

Sanket Jagdale

Niraj Jangale

Ayush Jiwatode

If you want to become a full stack web developer, then your first step should be learning HTML, and if you go on the internet and search for resources of HTML, you will be lost in the ocean of resources. So in this particular blog, I will be sharing some top resources from where you can learn HTML for free and move ahead with your journey of becoming a full-stack web developer.

Before going to resources, let’s understand what is HTML?

1. HTML is the hypertext markup language that decides how your web page will look like.
2. HTML defines the structure of the web page and it is used for creating different web pages.
3. HTML particularly discusses the structure of any web page.

next up let’s talk about some important Concepts that you should be focusing on while learning HTML starting with the

1. Different types of semantic tags: So on any web page there are different types of tags so you should be aware of different semantic tags which define the structure of a web page.
2. HTML forms: On the webpage, there is one important part of taking input from the user and working accordingly so you should be aware of HTML forms.
3. HTML tables: you should be aware of HTML tables so that you can create different tables of different sizes.
4. HTML media: In HTML media you should be aware of three tags which are image video and audio tags.

So up until this point in time, we have talked about what is HTML and what are the different important topics that you should be focusing on while learning HTML.

Let’s talk about the resources. So in this particular blog, I will be sharing two types of resources. The first one is documentation. Documentation will help you to learn any technology, as well as it will serve you as a reference if you need help in the future. The next type of resource is video tutorials.

Starting with the resources

1. w3schools

2. MDN Docs

3. html.com

4. Tutorial by freecodecamp

5. Crash course by traverse media

6. Crash course by Programming with Mosh

7. Tutorial by CodeWithHarry

Resources Link (Notion Page) 🧑🏼‍💻: https://wobbly-jade 693.notion.site/HTML-83767e7c2a34486abac51510f94c3ffc

You can watch this particular video from my channel for a better understanding:

Get in Touch with me: https://linktr.ee/Devgrammer

Follow Devgrammer - Sanket Jagdale for more !!!

As a Web Developer, I have been building numerous side projects, learning new technologies, and doing internships. However, I recently decided to explore a new dimension and started freelancing. I was excited to try something new and expand my skillset in many aspects.

Looking back on the experience, I realized that there were many valuable lessons I learned along the way. In this blog post, I’ll share my experience and the main lessons I learned from my first freelance project.

Contents :

1. Finding the Freelancing Project
2. Project Scope and Requirements
3. Client Communication
4. Timeline and Deliverables
5. Challenges faced
6. Lessons Learned
7. Conclusion

1. Finding the Freelance Project:

I landed my first client through a mutual network. The client was initially in contact with my friend, who told me about the client’s project requirements. I decided to seize this opportunity and called the client to discuss the project further.

The client then provided me with the contact information of the technical guy at their company and suggested that we should discuss the technical aspects of the project first. If everything went well, we could then discuss the financials.

I was excited to move forward, so the very next day, I contacted the technical expert to discuss the project. After a call where we discussed an overview of the project and his requirements, I was confident that I could complete the job. I called the client back to talk about the financials, and we discussed different phases, such as the advance payment, payment after design, and payment after hand-off. After negotiations from both sides, we agreed on a total amount of 40,000rs.

2. Project Scope and Requirements

My task was to design and develop a full-stack website for the company. This involved creating the website’s front-end and back-end components, as well as implementing user authentication, such as login and signup. Additionally, I was responsible for creating dynamic reports and fetching data from the database. The website needed to be user-friendly and visually appealing while also being efficient and responsive. Although there were no limitations or requirements for the tech stack, the database specified for the project was MS SQL.

3. Client Communication

For communication, the client created a WhatsApp group and added 3–4 members from their company. This allowed for seamless modifications and updates to be shared between the team and myself. Throughout the project, we communicated exclusively on this group and through calls, where I provided daily updates on the website’s design, new features, and functionality, complete with screenshots and demos. The client provided valuable feedback and made modifications as necessary, ranging from minor design changes to the addition of new features and functionality. This collaborative communication approach was key to ensuring that the website met the client’s expectations and was delivered on time and within budget.

4. Timeline and Deliverables

Phase 1: Design Hand-off

The day after our call, I began designing the website, and within 3 to 4 days, I shared the first draft and a presentation on the WhatsApp group. The client provided valuable feedback, ranging from minor changes such as color and shape modifications to major changes such as altering the navbar’s functionality. I incorporated the feedback and made the necessary changes, providing updated drafts for review on an ongoing basis. and after a week or so we finalized the design.

Phase 2 : Research and Learning

Since I was unfamiliar with MS SQL and how to integrate it with Node.js, I turned to the internet for help. Unfortunately, I found very few resources related to MS SQL integration. However, I eventually stumbled upon a great blog post that outlined the integration process step by step.

Phase 3 : Development

After conducting the necessary research, I began the development phase and integrated Node.js with a demo MS SQL server. From there, I began creating various frontend components and pushed them to GitHub, allowing the client to review and provide feedback on each iteration. This collaborative approach helped ensure that the client was satisfied with the website’s design and functionality.

Backend work for the website proved to be quite challenging, particularly due to the company’s strong focus on data analysis. In total, there were 12 large databases, each containing upwards of 100 tables, which made the backend work quite complex and time-consuming.

To handle this, I broke the backend work down into smaller, more manageable components and developed a clear plan of action. I also utilized various tools and technologies to streamline the development process.

Phase 4 : Handoff

After many sleepless nights and putting in a lot of hard work, I was finally able to hand off the completed project to the client. The feeling of relief and satisfaction was immense, as I had worked tirelessly to ensure that the website met all of the client’s requirements and was functioning perfectly. The handoff process went quite smoothly, and I was able to provide the client with all the necessary documentation and support for the website’s maintenance and upkeep.

5. Overcoming the Challenges Faced

1. It’s not uncommon for clients to prioritize functionality over demos or screenshots, especially when it comes to backend work. However, it can be challenging when you’re in the design phase and not yet ready to implement certain features.
2. Integrating MS SQL with your Nodejs server was a particularly challenging task. It’s perfectly normal to feel impatient or frustrated when working on something new and unfamiliar, but it’s important to remember that every new skill takes time to master.
3. On top of that, balancing schoolwork and client demands can be tough. It’s important to manage your time effectively and communicate clearly with your client to ensure that their needs are being met while also prioritizing your own responsibilities.
4. Overall, working on a complex project can be challenging, but with patience, persistence, and effective time management, you can successfully deliver a high-quality product that meets your client’s needs.

6. Lessons Learned

1. When embarking on a new freelance project, creating/asking for detailed documentation of all the requirements and project details can be incredibly beneficial. This documentation acts as a reference point for both you and your client, ensuring that everyone is on the same page and there is no ambiguity regarding the project’s scope. Additionally, having clear and detailed documentation can also be useful for negotiation purposes in the later stages of the project.
2. Learning something new can be a challenging and time-consuming process, but it’s essential for growth and development. Whether you’re learning a new programming language or a new skill, it’s important to be patient throughout the process. Don’t fall into the trap of tutorial hell, where you spend all your time watching tutorials and never actually putting what you’ve learned into practice. Instead, take the time to learn a new concept or skill, then use it to build something. This will help you solidify your understanding of the topic and give you a chance to apply what you’ve learned in a practical way.

7. Conclusion

In conclusion, working on this project was a great experience for me, and I learned a lot from it. From managing client expectations to working with new technologies, it was a perfect roller coaster ride. I gained a lot of confidence in my abilities as a full-stack developer and learned to work more efficiently and effectively under tight deadlines. This experience has also taught me the importance of clear communication, the value of timely updates, and the value of collaborating with the client throughout the project. I am proud of the work I accomplished on this project and am excited to apply these learnings to my future projects.

In the end, Thank you for reading this blog, I will be coming up with more useful experiences in the future, so follow Devgrammer - Sanket Jagdale and stay tuned !!!

Written by — Sanket Jagdale (https://linktr.ee/sanket00900)