Web End Projects (My Portfolio)
Tags: showdev, webdev, javascript, programming
Published: 2023-09-02 08:52:40

Hello, World!

In this post, I will be sharing my collection of Web End Projects that I've built over the years.

You also can check out my GitHub Repository: [AswinBarath/Web-End-Projects](https://github.com/AswinBarath/Web-End-Projects)

### TL;DR 
- (short for too long; didn't read)

> "Web-End" tries to unify "Front-End" and "Back-End" in a better and more focused way than "Full Stack" does,
because it keeps the focus more squarely on what's web experience related.
>
> - Web-end means you deal with anything web related, whether that be in the browser or on the server.
> - So building web-consumed APIs (REST, GraphQL) is web-end. Writing React code is web-end.
> - Writing libraries or frameworks (for Node or the browser) is web-end.
> - Optimizing performance or monitoring security for web apps is web-end.
> - Even managing containers for web app deployments is web-end.
>
> -- [**Kyle Simpson**, Author of *You-Dont-Know-JS*](https://github.com/getify)

---

| Full Stack Web Apps | Node JS Microservices & APIs | React JS Web Apps | Vanilla JavaScript Projects | Basic Websites with HTML & CSS |
| - | - | - | - | - |
| [JU Query (React+Firebase)](#ju-query) | [Timestamp-Microservice](#timestamp-microservice) | [Robofriends](#robofriends) |  [Cool Cursor](#Cool-Cursor) | [Layout Template](#Layout-Template) |
| [Smart-brain (PERN Stack)](#smart-brain-app) | [Login-Microservice](#login-microservice) | [Tesla Landing Page](#tesla-landing-page) | [Signup Page](#Signup-Page) | [Robot Friend](#Robot-friend) |
| [User management App (MERN Stack)](#) | [Tweet-stream](#tweet-stream) | [Disney plus clone](#disney-plus-clone) | [Quote Generator](#quote-generator) | [Image Portfolio](#Image-Portfolio) |
| [SQL Injection and Prevention (LAMP Stack)](#sql-injection-and-prevention) | [](#) | [](#) | [Picture in Picture App](#picture-in-picture-app) | [Book-Information-2.0](#Book-Information-2.0) |
| [Event Timeline](#event-timeline) | [](#) | [](#) | [Infinite Scroll](#infinite-scroll) | [Book-Information](#Book-Information) |
| [Clothing e-Commerce App (MERN Stack)](#clothing-e-commerce-app) | [](#) | [](#) | [Photo Sharing App](#photo-sharing-app) | [](#) |
| [Blogfolio Website](#blogfolio-website) | [](#) | [](#) | [Joke Teller App](#joke-teller-app) | [](#) |
| [](#) | [](#) | [](#) | [Authentication Boilerplate](#authentication-boilerplate) | [](#) |
| [](#) | [](#) | [](#) | [To Do With Auth](#to-do-with-auth) | [](#) |
| [](#) | [](#) | [](#) | [Calendar Project](#calendar-project) | [](#) |
| [](#) | [](#) | [](#) | [Background Generator](#background-generator) | [](#) |
| [](#) | [](#) | [](#) | [Dynamic Chat App](#dynamic-chat-app) | [](#) |
| [](#) | [](#) | [](#) | [](#) | [](#) |
| [](#) | [](#) | [](#) | [](#) | [](#) |

---

## Full Stack Web Apps 

### JU Query

| [Github Repository](https://github.com/AswinBarath/ju-query) | [Deployed Link](https://ju-query.web.app/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/ju-query/raw/main/assets/JU%20Query%20Cover%20Design.png" alt="JU Query Project Cover Design" width="600px" /></p> | ![JU-Query Project Register Login Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3gnmhyihi0rj0mezc7q.gif) |

---

### Smart Brain App

| [Github Repository](https://github.com/AswinBarath/Smart-brain-app) | [Deployed Link](https://smart-brain-26.herokuapp.com/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://aswinbarath.me/static/ebd117324887bf63536c42a5e2a028ab/43fa5/Smart-brain-react-app.png" alt="Smart Brain App Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/Smart-brain-app/raw/main/assets/Smart%20brain%20React%20app%20demo-min.gif" alt="Smart Brain App Demo" width="600px" /> </p> |

---

### User management App (under development)

| [Github Repository](https://github.com/AswinBarath/User-Management-Web-App) | [Deployed Link]() |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/User-Management-Web-App/raw/main/assets/logo/User%20Mng%20CRUD%20App%20Cover%20Design.png" alt="User Mangement Cover Design" width="600px" /></p> | <p><img src="" alt="User Management Demo" width="600px" /> </p> |

---

### SQL Injection and Prevention

| [Github Repository](https://github.com/AswinBarath/sql-injection-and-prevention) | [Deployed Link](https://sql-injection-and-prevention.herokuapp.com/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/sql-injection-and-prevention/raw/main/public/assets/SQL%20Injection.png" alt="SQL Injection and Prevention Project Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/sql-injection-and-prevention/raw/main/public/assets/SQL%20Injection%20Login.gif" alt="SQL Injection and Prevention Project Demo" width="600px" /> </p> |

---

### Event Timeline

| [Github Repository](https://github.com/AswinBarath/Event-Timeline) | [Deployed Link](https://event-timeline.ashwin26.repl.co/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/Event-Timeline/raw/main/assets/Event%20Timeline.png" alt="Event Timeline Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/Event-Timeline/raw/main/assets/Event%20Timeline.gif" alt="Event Timeline Demo" width="600px" /> </p> |

---

### Clothing e-Commerce App (under development)

| [Github Repository](https://github.com/AswinBarath/Clothing-e-Commerce) | [Deployed Link]() |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/Clothing-e-Commerce/raw/main/assets/Clothing%20e-Commerce%20App%20Cover%20Design.png" alt="Clothing e-Commerce App Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/Clothing-e-Commerce/raw/main/assets/3%20Homepage%20animations.gif" alt="Clothing e-Commerce App Demo" width="600px" /> </p> |

---

### Blogfolio Website

| [Github Repository](https://github.com/AswinBarath/aswinbarath.github.io) | [Deployed Link](https://aswinbarath.github.io/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://raw.githubusercontent.com/AswinBarath/aswinbarath.github.io/main/assets/img/Blogfolio%20Cover%20Design.png?token=GHSAT0AAAAAACDIOM3A2SVIUUYK3CSJJYJCZHUGBWQ" alt="Blogfolio Website Cover Design" width="600px" /></p> | <p><img src="https://raw.githubusercontent.com/AswinBarath/aswinbarath.github.io/main/assets/gif/Blogfolio%20Demo.gif?token=GHSAT0AAAAAACDIOM3AKYBORCC6DPRQC6ZAZHUGAUQ" alt="Blogfolio Website Demo" width="600px" /> </p> |

---
---

## Node JS Microservices & APIs

### Tweet Stream (under development)

| [Github Repository](https://github.com/AswinBarath/Tweet-stream) | [Deployed Link]() |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/Tweet-stream/raw/main/assets/Tweet%20Stream%20Cover%20Design.png" alt="Tweet Stream Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/Tweet-stream/raw/main/assets/Tweet%20Stream%20Demo.gif" alt="Tweet Stream Demo" width="600px" /> </p> |

---

### Timestamp Microservice

| [Github Repository](https://github.com/AswinBarath/Timestamp-Microservice) | [Deployed Link](https://timestamp-microservice-nodeapi.herokuapp.com/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/Timestamp-Microservice/raw/main/assets/Timestamp%20Microservice%20Cover%20Design.png" alt="Timestamp Microservice Cover Design" width="600px" /></p> | <p><img src="" alt="Timestamp Microservice Demo" width="600px" /> </p> |

---

### Login Microservice

| [Github Repository](https://github.com/AswinBarath/Login-Microservice) | [Deployed Link](https://login-microservice-fcc.herokuapp.com/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://raw.githubusercontent.com/AswinBarath/Login-Microservice/main/public/Login%20Microservice.png" alt="Login-Microservice Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/Login-Microservice/raw/main/public/Login%20Microservice.gif" alt="Login Microservice Demo" width="600px" /> </p> |

---
---

## React JS Web Apps 

### Robofriends

| [Github Repository](https://github.com/AswinBarath/Robofriends) | [Deployed Link](https://aswinbarath.github.io/robofriends/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/robofriends/raw/main/assets/Robofriends%20Cover%20Design.png" alt="Robofriends Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/robofriends/raw/main/assets/Robofriends%20Demo.gif" alt="Robofriends Demo" width="600px" /> </p> |

--- 

### Tesla Landing Page

| [Github Repository](https://github.com/AswinBarath/Tesla-clone) | [Deployed Link](https://tesla-clone-app.herokuapp.com/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/tesla-clone/raw/main/assets/Tesla%20Clone%20Cover%20Design.png" alt="Tesla Landing Page Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/tesla-clone/raw/main/public/demo/TeslaCloneDemo.gif" alt="" width="600px" /> </p> |

--- 

### Disney plus clone (under development)

| [Github Repository](https://github.com/AswinBarath/Disney-plus-clone) | [Deployed Link]() |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="" alt="Disney plus clone Cover Design" width="600px" /></p> | <p><img src="" alt="Disney plus clone demo" width="600px" /> </p> | -->

--- 

## Vanilla JavaScript Projects

### Dynamic Chat App

| [Github Repository](https://github.com/AswinBarath/Dynamic-chat-app) | [Deployed Link](https://dynamic-chat-app.web.app/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="" alt="Dynamic Chat App Cover Design" width="600px" /></p> | <p><img src="" alt="Dynamic Chat App Demo" width="600px" /> </p> |

---

### To Do With Auth

| [Github Repository](https://github.com/AswinBarath/to-do-with-auth) | [Deployed Link]() |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="" alt="To Do With Auth Cover Design" width="600px" /></p> | <p><img src="" alt="To Do With Auth Demo" width="600px" /> </p> | 

---

### Authentication Boilerplate

| [Github Repository](https://github.com/AswinBarath/authentication-boilerplate) | [Deployed Link]() |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="" alt="Authentication Boilerplate Cover Design" width="600px" /></p> | <p><img src="" alt="Authentication Boilerplate Demo" width="600px" /> </p> | 

---

### Photo Sharing App

| [Github Repository](https://github.com/AswinBarath/photo-sharing-app) | [Deployed Link](https://photo-sharing-app-1dd43.web.app/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="" alt="Photo Sharing App Cover Design" width="600px" /></p> | <p><img src="" alt="Photo Sharing App Demo" width="600px" /> </p> | 

---

### Joke Teller App

| [Github Repository](https://github.com/AswinBarath/Joke-teller) | [Deployed Link](https://aswinbarath.github.io/Joke-teller/) |
| --- | --- |
| Project Cover Design | Project Demo |
| ![Joke Teller App Cover Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/raq9q6fekqqq4eaz92tz.png) | <p><img src="" alt="Joke Teller App Demo" width="600px" /> </p> | 

---

### Infinite Scroll

| [Github Repository](https://github.com/AswinBarath/infinte-scroll) | [Deployed Link](https://aswinbarath.github.io/infinte-scroll/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/infinte-scroll/raw/main/assets/Infinite%20Scroll%20Cover%20Design.png" alt="Infinite Scroll Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/infinte-scroll/raw/main/assets/Infinite%20Scroll%20Demo.gif" alt="Infinite Scroll Demo" width="600px" /> </p> |

---

### Picture in Picture App

| [Github Repository](https://github.com/AswinBarath/Picture-in-Picture) | [Deployed Link](https://aswinbarath.github.io/Picture-in-Picture/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/Picture-in-Picture/raw/main/assets/Picture%20in%20Picture%20Cover%20Design.png" alt="Picture in Picture App Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/Picture-in-Picture/raw/main/assets/Picture%20in%20Picture%20Demo.gif" alt="Picture in Picture App Demo" width="600px" /> </p> |

---

### Quote Generator

| [Github Repository](https://github.com/AswinBarath/quote-generator) | [Deployed Link](https://aswinbarath.github.io/quote-generator/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/quote-generator/raw/main/assets/Quote%20Generator%20Cover%20Design.png" alt="Quote Generator Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/quote-generator/raw/main/assets/Quote%20Generator%20Demo.gif" alt="Quote Generator Demo" width="600px" /> </p> |

---

### Cool Cursor

| [Github Repository](https://github.com/AswinBarath/Cool-cursor) | [Deployed Link](https://aswinbarath.github.io/Cool-cursor/) |
| --- | --- |
| Project Cover Design | Project Demo |
| ![Cool Cursor Project Cover Designn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivk7y8jysk9fqn6jweub.png) | <p><img src="https://raw.githubusercontent.com/AswinBarath/Web-End-Projects/main/assets/Cool%20Cursor.gif" alt="Cool Cursor Project Demo" width="600px" /> </p> |

---

### Signup Page

| [Github Repository](https://github.com/AswinBarath/Sign-up-page) | [Deployed Link](https://aswinbarath.github.io/Sign-up-page/) |
| --- | --- |
| Project Cover Design | Project Demo |
| ![Signup Page Project Cover Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jx5n6e31gdm7mmts9fa.png) | <p><img src="https://raw.githubusercontent.com/AswinBarath/Web-End-Projects/main/assets/Signup%20Page.gif" alt="Signup Page Project Demo" width="600px" /></p> |

---

### Background Generator

| [Github Repository](https://github.com/AswinBarath/Background-generator) | [Deployed Link](https://aswinbarath.github.io/Background-generator/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/Background-generator/raw/main/assets/Background%20Generator%20Cover%20Design.png" alt="Background Generator Project Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/Background-generator/raw/main/assets/Background%20Generator%20Demo.gif" alt="Background Generator Demo" width="600px" /> </p> |

---

### Calendar Project

| [Github Repository](https://github.com/AswinBarath/calendar-project) | [Deployed Link](https://aswinbarath.github.io/calendar-project/) |
| --- | --- |
| Project Cover Design | Project Demo |
| <p><img src="https://github.com/AswinBarath/calendar-project/raw/master/assets/Calendar%20Project%20Cover%20Design.png" alt="Calendar Project Cover Design" width="600px" /></p> | <p><img src="https://github.com/AswinBarath/calendar-project/raw/master/assets/Calender%20Project%20Demo.gif" alt="Calendar Project Demo" width="600px" /> </p> |

---

## Basic Websites with HTML & CSS

### Layout Template

| [Github Repository](https://github.com/AswinBarath/Layout-template) | [Deployed Link](https://aswinbarath.github.io/Layout-template/) |
| --- | --- |
| Project Cover Design | Project Demo |
| ![Layout Template Project Cover Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34b2wqkgpxp974hdhdzv.png) | <p> <img src="https://raw.githubusercontent.com/AswinBarath/Web-End-Projects/main/assets/Layout%20Template.gif" alt="Layout Template Project Demo" width="600px" /> </p> |

---

### Robot Friend

| [Github Repository](https://github.com/AswinBarath/robot-friend) | [Deployed Link](https://aswinbarath.github.io/robot-friend/) |
| --- | --- |
| Project Cover Design | Project Demo |
| 
![Robot Friend Project Cover Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o04kxc7idlcz9br7m5w.png) | <p> <img src="https://raw.githubusercontent.com/AswinBarath/Web-End-Projects/main/assets/Robot%20Friend.gif" alt="Robot Friend Project Demo" width="600px" /> </p> |

---

### Image Portfolio

| [Github Repository](https://github.com/AswinBarath/Image-portfolio) | [Deployed Link](https://aswinbarath.github.io/Image-portfolio/) |
| --- | --- |
| Project Cover Design | Project Demo |
| 
![Image Portfolio Project Cover Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hzvgg59ly2kq5elq0uq.png) | <p> <img src="https://raw.githubusercontent.com/AswinBarath/Web-End-Projects/main/assets/Image%20Portfolio.gif" alt="Image Portfolio Project Demo" width="600px" /> </p> |

---

### Book-Information-2.0

| [Github Repository](https://github.com/AswinBarath/Book-Information-2.0) | [Deployed Link](https://aswinbarath.github.io/Book-Information-2.0/) |
| --- | --- |
| Project Cover Design | Project Demo |
| 
![Book-Information 2.0 Project Cover Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5751djf0eolkmyfgqmp.png) | ![Book-Information 2 Project Demo Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uonh12l1u2tg6775xvkb.gif) |

---

### Book-Information

| [Github Repository](https://github.com/AswinBarath/Book-Information) | [Deployed Link](https://aswinbarath.github.io/Book-Information/) |
| --- | --- |
| Project Cover Design | Project Demo |
| 
![Book-Information Project Cover Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl5ylc6q4p5qgjud0tx6.png) | ![Book-Information Project Demo Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3bruz85p7oaps743bu0.gif) |

---

**Note:** Few of these projects are under development

---

## Who Am I?

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through Blogging during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

Thank you so much for reading my blog🙂.