❌

Reading view

There are new articles available, click to refresh the page.

Learn REST-API

REST API

A REST API (Representational State Transfer) is a web service that allows different applications to communicate over the internet using standard HTTP methods like GET, POST, PUT, and DELETE. It follows REST principles, making it lightweight, scalable, and easy to use.

REST API Principles

Client-Server Architecture

A REST API follows a client-server architecture, where the client and server are separate. The client sends requests, and the server processes them and responds, allowing different clients like web and mobile apps to communicate with the same backend.

Statelessness

Before understanding statelessness, you need to understand statefulness.

  • Statefulness: The server stores and manages user session data, such as authentication details and recent activities.
  • Statelessness: The server does not store any information. Each request is independent, and the client must include all necessary data, like authentication details and query parameters, in every request.

This behavior makes the server scalable, reliable, and reduces server load.

Caching

Caching improves performance by storing responses that can be reused, reducing the need for repeated requests to the server. This minimizes response time and server load.

Uniform Interface

A uniform interface ensures consistency by using standard HTTP methods like GET, POST, PUT, and DELETE. This makes the API predictable and easy to use.

Layered System

A layered system divides tasks into separate layers, like security, caching, and user requests. The client only interacts with the top layer, making the system easier to manage and more flexible.

Start To Code

I use Node.js and some popular packages:

  • Express: A Node.js web framework used for building web applications and APIs.
  • Joi: A package used to validate user input, ensuring data integrity and security.

basic code

const express = require("express");
const app = express();
const joi = require("joi");
app.use(express.json());

//data
customers = [
    {name : "user1", id : 1},
    {name : "user2", id : 2},
    {name : "user3", id : 3}
]

//listen
const port = process.env.PORT || 8080;
app.listen(port, ()=> console.log("listening on ",port));

//function
function validateUserName(customer){
    schema = joi.object({
	name : joi.string().min(3).required()
    });
    return schema.validate(customer)
}

GET

GET is used to retrieve data from the server. the response code is 200 if successful.

app.get('/api/customers',(req,res)=>{
    res.send(customers);
});

get specific user details

app.get('/api/customer/:id', (req,res)=>{
    const user_details = customers.find(user => req.params.id == user.id );
    if(!user_details){
        res.status(404).send("Data Not Found");
    }else{
        res.status(200).send(user_details)
    }
});

POST

The POST method is used to upload data to the server. The response code is 201, and I used the validateUserName function to validate a username.

app.post('/api/customer/add',(req, res)=>{
    const {error} = validateUserName(req.body);
    if(error){	
	res.status(400).send(error.details[0].message);
    }
    else{
	customer = {
	    name : req.body.name,
	    id   : customers.length + 1
	}
	customers.push(customer);
	res.status(201).send("data inserted successfully");
    }
});

Β 

PATCH

The PATCH method is used to update existing data partially. To update the entire user data, the PUT method should be used.

app.patch('/api/customer/:id', (req, res)=>{
    const customer = customers.find(user => user.id == req.params.id);
    const {error} = validateUserName(req.body);
    if(!customer){
	res.status(404).send("Data Not Found");
    }
    else if(error){
	console.log(error)
	res.status(400).send(error.details[0].message);
    }
    else{
	customer.name = req.body.name;
	res.status(200).send("successfully updated");
    }
});

Β 

DELETE

The DELETE method is used to remove user data.

app.delete('/api/customer/:id', (req,res)=>{
    const user = customers.find(user => user.id == req.params.id);
    index = customers.indexOf(user);
    if(!user){
	console.log("test")
	res.status(404).send("Data Not Found");
    }
    else{
	customers.splice(index,1);
	res.status(200).send("successfully deleted");
    }
});

Β 

What I Learned

CRUD Operations with REST API

I learned the basics of REST API and CRUD operations, including the uniform methods GET, POST, PUT, PATCH, and DELETE.

Status Codes

REST APIs strictly follow status codes:

  • 200 – OK
  • 201 – Created successfully
  • 400 – Bad request
  • 204 – No content
  • 404 – Page not found

Joi Package

For server-side validation, the Joi package is used. It helps verify user data easily.

Middleware

Using app.use(express.json()) as middleware ensures that for POST, PATCH, and PUT methods, JSON-formatted user data is parsed into an object accessible via req.body.

Β 

Project Title: Personal Portfolio Website

Objective: Create and host a personal portfolio website using HTML and CSS.


Step 1: Design Selection

  • Objective: Choose a user interface (UI) and user experience (UX) design that aligns with your vision for the portfolio.
  • Action:
    • Searched online for a simple and clean portfolio design template.
    • Selected and saved the design to serve as a foundation for your project.

Step 2: Code Reference and Customization

  • Objective: Obtain a starting point for your HTML and CSS code and customize it to suit your needs.
  • Action:
    • Uploaded the selected design to ChatGPT and requested a sample code.
    • Used the provided code as a reference.
    • Opened the code in Visual Studio Code (VS Code) and began customizing it to reflect your personal information and preferences.
    • Downloaded and included necessary images and emojis, such as your profile photo, ensuring they were all stored in a folder named β€œportfolio.”

Step 3: Code Implementation and Testing

  • Objective: Implement the code and ensure it functions correctly.
  • Action:
    • Edited the HTML and CSS files in VS Code, adapting the layout, text, and images to create a personalized portfolio.
    • Regularly saved changes and previewed the website in your browser to ensure it displayed as intended.
    • Made adjustments and refinements until the portfolio met your satisfaction.

(HTML)index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAKTHIVEL | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>SAKTHIVEL <span class="highlight">S</span></h1>
        <p>FullStack Developer</p>
    </header>

    <section class="container">
        <div class="sidebar">
            <img src="profile.jpg" alt="sakthi" style="width:150px; height:150px;">
            <h3>SAKTHIVEL SARAVANAN</h3>
            <div class="contact-info">                
                <a href="https://www.linkedin.com/in/sakthivel-saravanan" target="_blank" style="margin-right: 20px;"><img src="linked-in.svg" alt="LinkedIn" style="width:40px; height:40px;"></a>
                <a href="https://github.com/SakthivelS2001" target="_blank"><img src="github.svg" alt="GitHub" style="width:50px; height:45px;"></a>

            </div>
            <div class="details">
                <p><strong>Phone:</strong> +91 9514552154</p>
                <p><strong>Email:</strong> sakthivelricky@gmail.com</p>
                <p><strong>Location:</strong> Velachery, Chennai</p>
                <a href="resume.pdf" target="_blank" class="download-resume">Download Resume</a>
            </div>
        </div>

        <div class="main-content">
            <section class="about">
                <h2>ABOUT ME</h2>
                <p>I'm Sakthivel, a passionate software developer with a strong foundation in computer science, holding a Bachelor's degree in Computer Science from Sri Sankara Arts and Science College, Kanchipuram. Currently, I'm advancing my expertise with a Master's degree in Information Technology from Arignar Anna Arts and Science College, Cheyyar.</p>
                <p>With a deep interest in front-end development, I have honed my skills in HTML, CSS, and JavaScript, creating user-friendly and visually appealing interfaces. My proficiency in Python, along with a basic understanding of SQL and version control using Git/GitHub, equips me to tackle various programming challenges.</p>
                <p>I thrive in collaborative environments where teamwork and innovation are key. I'm also committed to continuous learning, constantly seeking new ways to improve my skills and stay up-to-date with the latest industry trends.</p>
                <p>In addition to my technical abilities, I'm dedicated to overcoming personal challenges like stage fear, which has made me a more confident and effective communicator.</p>
                <p>Whether you're here to explore my work or discuss potential opportunities, I'm excited to connect and share more about how I can contribute to your projects.</p>
            </section>
            
            <section class="skills">
                <h2>Education & Skills</h2>
                <div class="skill-card">
                    <h3>Post Graduate</h3>
                    <p><b>Master's degree, Information Technology <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>

                </div>
                <div class="skill-card">
                    <h3>Under Graduate</h3>
                    <p><b>Bachelor's degree, Computer Science <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>
                </div>
                <div class="skill-card">
                    <h3>Skills</h3>
                    <p>Python|SQL|HTML|CSS|JAVASCRIPT|Git/Github</p>
                </div>
                <div class="skill-card">
                    <h3>Operating System</h3>
                    <p>Windows | Linux</p>
                </div>
            </section>
        </div>
    </section>
</body>
</html>

(CSS)styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
}

header .highlight {
    color: orange;
    font-weight: 700;
}

header p {
    margin: 5px 0;
    font-size: 18px;
    color: #555;
}

.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
}

.sidebar {
    flex: 1;
    max-width: 300px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sidebar img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.contact-info a {
    margin: 0 10px;
}

.details {
    margin-top: 20px;
}

.details p {
    margin: 10px 0;
    font-size: 14px;
}

.download-resume {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: orange;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.main-content {
    flex: 2;
    margin-left: 20px;
}

.about {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.about h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skills {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.skills h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skill-card {
    margin-top: 20px;
}

.skill-card h3 {
    font-size: 20px;
    color: orange;
}

.skill-card p {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

Now the output was displaying in local browser

Step 4: Web Hosting

  • Objective: Host your portfolio online so it can be accessed publicly.
  • Action:
    • Chose Neocities.org as your hosting platform, a site known for its ease of use in hosting simple websites.
    • Uploaded the entire project folder (named β€œportfolio”) to Neocities.org.
    • Successfully received a unique online link for your website, making it accessible to others.

Search the neocities from google and click the official website

Enter your website name you like to host use different name if username taken notify is shown.

Enter the password and Mail ID

And verify the β€œI am human” Box and click β€œCreate My Site” Button

Now click the Free option.

Enter the verification code from gmail.

click the dashboard to continue.

now we need to upload our project folder

click the β€œNew Folder”

enter the name

folder created

next we upload the files

click the folder

click upload

select the files to upload

now open the index.html file

this was open click to view button on right side top

now our project successfully hosting on internet

copy the above link and share your friends and family

Portfolio Link : https://sakthivels.neocities.org/Sakthivel%20Portfolio/

Git Link : https://github.com/SakthivelS2001/portfolio.git

Step 5: Final Review

  • Objective: Ensure everything is working properly and the portfolio is complete.
  • Action:
    • Conducted a final review of the live website to verify all elements were displayed correctly.
    • Confirmed that the website was fully functional and ready to share.

Skills Used:

  • HTML & CSS: For structuring and styling the website.
  • Web Hosting: Using Neocities.org to make your website accessible online.
  • VS Code: For code editing and customization.

Outcome: Successfully created and hosted a personalized portfolio website.

Conclusion:

This project marks my first real-time experience in creating and hosting a personal portfolio website. Throughout the process, I gained valuable knowledge and practical skills, which were instrumental in the successful completion of this project.

I would like to extend my gratitude to the following resources that significantly contributed to my learning:

  • ChatGPT: For providing guidance and code references that helped shape the structure of my portfolio.
  • YouTube Channel: Error Makes Clever: For offering insightful tutorials that deepened my understanding of HTML, CSS, and web development practices.
  • Youtube Channel: Brototype Tamil: For sharing practical tips and techniques that enhanced my coding skills.

This project not only allowed me to apply my skills but also provided an opportunity to explore new tools and methods, reinforcing my passion for web development.


❌