🧑🏻‍💻 My First 5 {Fun} projects (source code + demo)
Tags: webdev, react, beginners, showdev
Published: 2023-08-05 10:08:49

## Introduction

Initial learning I started with practical coding to learn anything new. The below projects are done previously by me.

It may be helpful for someone who learning frontend development to read the code and gather some knowledge from these projects:

1. Diary app
    
2. 404 page not found
    
3. Team with grid view
    
4. Nested tree UI react component
    
5. Magical text box (Personal experience)
    

## 1.Diary App (CMS)

This project is a content management system. I used the below tech stack.

**Project Functionalities:**

1. Creating/editing an article
    
2. Delete an article
    
3. Mark as fav your article
    

Frontend: **React**, **CSS, draft-js**(Rich text editor) **and Webpack**

Backend: **ExpressJS, Swagger(API documentation)** and **MongoDB**


![Diary app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/918u3cjsjdaowu3rszmh.jpeg)

**Resources:**

{% github https://github.com/lakshmanan-arumugam/my-diaries-front-end %}

{% github https://github.com/lakshmanan-arumugam/my-diaries-back-end %}

[Live demo URL](https://my-personal-diaries.netlify.app/directory)

## 2.404 page not found

In this project i learning about horizontal and vertical center align the image and content based on the window using CSS


![404 Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2n5rxrgjdb8dfhvaotd.png)

**Resources:**

{% github https://github.com/lakshmanan-arumugam/404-page-challenge %} 

[Live demo URL](https://website-404-page.netlify.app/)

## 3.Team page Grid view (Like Pinterest)

In this project, I tried to develop a grid view like Pinterest. but, this is how it's coming.


![Team page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vynplwwvqi6j1j8cgc5.png)

**Resources:**

{% github https://github.com/lakshmanan-arumugam/team-page-challenge %} 

[Live demo URL](https://challenge-team-page.netlify.app/)

## 4.Nested tree UI react component

In this project, I learned how to build a react component with maintain the state using local storage


![Nested tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxa0l8ovs8rn5wnbfmjy.png)

**Resources:**

{% github https://github.com/lakshmanan-arumugam/nested-tree %}

[Live demo URL](https://lakshmanan-arumugam.github.io/nested-tree/)

## 5.Magical text box (Personal experience)

I already covered this component in another [article reference](https://lakshmananarumugam.com/normal-text-box-vs-magical-text-box)

This component builds when working on the SASS(Product) web application. This component requirement completely came from **the designer**.

**Problem statement**

When we use the text field component a customer is not able to see the full content. curtain **width** above the content will the text field overflow the text inside the content

At this time may someone suggest using a **textarea** component? but, the problem is the unwanted space on render, again the problem is a content overflow issue with a certain **height.**

**Solution:**

In UI it should look like a text field. When content grows it should increase automatically the component height.

That's how the discussion ended.

**Let's see the real example:**

![Magic textbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/813znm9xglhwglw9qn1x.png)

**Resources:**

{% embed https://codesandbox.io/embed/react-magic-textbox-forked-d56ghj?fontsize=14&hidenavigation=1&theme=dark %}

**Thanks for reading :)**

### **Popular articles:**
{% cta https://lakshmananarumugam.com/enum-in-javascript %} Enum in javascript 🤯 {% endcta %}

{% cta https://lakshmananarumugam.com/beyond-tradition-innovating-with-component-driven-development-in-react-typescript %} Beyond Tradition: Innovating with Component-Driven Development {% endcta %}