🧑🏻‍💻 My First 5 {Fun} projects (source code + demo)

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

Resources:

allsimpledevcode / my-diaries-front-end

React application with styled component

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration…

View on GitHub

allsimpledevcode / my-diaries-back-end

Demo Link

Live demo URL

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

Resources:

allsimpledevcode / 404-page-challenge

Sample 404 page not found

404 page not found

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• Contact

Overview

Every website have own 404 page found

• Here, I develop a sample 404 page for devchallenges.io website

Built With

• HTML
• CSS

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

Contact

• Website lakshmananarumugam.com
• GitHub @explore-free-projects

View on GitHub

Live demo URL

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.

Resources:

allsimpledevcode / team-page-challenge

Responsive complex grid

Team page challenge

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• Contact

Overview

Team page challenge

• Here, I develop a sample Team page challenge from devchallenges.io website

Built With

• HTML
• CSS
• Reponsive design

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

Contact

• Website lakshmananarumugam.com
• GitHub @explore-free-projects

View on GitHub

Live demo URL

4.Nested tree UI react component

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

Resources:

allsimpledevcode / nested-tree

Nested tree UI

This component mainly designed for table column/menu item manipulation with minimal effort.

Demo

Features

• Persist data and state
• Provide an option to search items at any level
• Reorder items at sibling level
• Option to edit/delete item (Inline operation handle)
• Select all children items when the parent item gets selected
• Provide an option to select each item in a tree and select a parent item if all child items selected

Component

In Nested tree UI component developed by the following components.

Component	Info
CheckBox group	Contains group of checkbox element with accordion
CheckBox with Dragger	Custom checkbox with inline edit textbox, edit and delete operation buttons
Column customize container	Main tree UI search, filter, add and remove operation

Installation

First clone the project files from this report and go to the project directory in your system. Run the below commands in your terminal:

 $ yarn install
 $ yarn

…

View on GitHub

Live demo URL

5.Magical text box (Personal experience)

I already covered this component in another article reference

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:

Resources:

Thanks for reading :)

Popular articles:

Enum in javascript 🤯

Beyond Tradition: Innovating with Component-Driven Development

Comments

[a_moah__]

I like your work. Great one