Coder Legion - Recent posts tagged fullstackdeveloper

Your GitHub profile is your developer identity

Wed, 29 Apr 2026 18:15:09 +0000

I recently improved my GitHub profile README to make it more clean, structured, and professional

Small improvements like better UI, clear tech stack, and organized stats can make a big difference in how your work is presented.

As developers, we often focus only on coding — but presentation matters too.

Here’s mine:
https://github.com/YasirAwan4831

Would love to hear your thoughts

#GitHub #WebDevelopment #FullStackDeveloper #DeveloperJourney #MuhammadYasir #YasirAwan4831

Typing Master Web App (React + Vite) — Full Project Breakdown

Thu, 26 Mar 2026 16:07:03 +0000

Introduction

Hi, I’m Muhammad Yasir — a Full Stack Developer.

In this blog, I’m excited to share one of my recent practice projects: Typing Master Web Application built using modern technologies like React and Vite.

This project is designed to help users improve their typing speed and accuracy through an interactive and customizable interface.

Project Purpose

The goal of this project was:

To strengthen my React skills
To practice clean architecture and reusable components
To build a real-world style UI project
To implement custom hooks and state management

Live Demo & Resources

Live Application:
https://typing-master-react-tau.vercel.app/

GitHub Repository:
https://github.com/YasirAwan4831/typing-master-react

YouTube Video Walkthrough:
https://youtu.be/LMQIfsonc6s?si=O8-090CBSK2h3qLM

Tech Stack

React JS
Vite
JavaScript (ES6+)
CSS Modules

Features Overview

⌨️ Multiple Typing Modes

Words
Sentences
Paragraphs
Code Snippets
Custom Text

Real-Time Stats

WPM (Words Per Minute)
CPM (Characters Per Minute)
Accuracy
Error Tracking

UI & Customization

Dark Mode / Theme Toggle
Typography Settings (Text Size & Style)
Clean and Responsive Design

Extra Features

Sound Effects while typing
Numbers & Capitals toggle
Restart Test functionality

Performance Tracking

History system to track previous tests

Project Architecture

This project follows a modular and scalable folder structure:

typing-master-react/
├─ public/
│  ├─ .htaccess
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ manifest.json
│  ├─ robots.txt
│  ├─ sitemap.xml
│
├─ src/
│  ├─ components/
│  │  ├─ Chart/
│  │  ├─ Common/
│  │  │  ├─ Button/
│  │  │  ├─ Input/
│  │  │  └─ ToggleSwitch/
│  │  ├─ ControlPanel/
│  │  ├─ Footer/
│  │  ├─ History/
│  │  ├─ Navbar/
│  │  ├─ ResultModal/
│  │  └─ TypingArea/
│  │
│  ├─ context/
│  │  ├─ HistoryContext.jsx
│  │  ├─ SettingsContext.jsx
│  │  └─ ThemeContext.jsx
│  │
│  ├─ data/
│  │  ├─ codeSnippets.js
│  │  ├─ paragraphs.js
│  │  ├─ sentences.js
│  │  └─ words.js
│  │
│  ├─ hooks/
│  │  ├─ useHistory.js
│  │  ├─ useLocalStorage.js
│  │  ├─ useSound.js
│  │  ├─ useTheme.js
│  │  ├─ useTimer.js
│  │  └─ useTypingTest.js
│  │
│  ├─ styles/
│  │  ├─ animations.css
│  │  ├─ global.css
│  │  └─ variables.css
│  │
│  ├─ utils/
│  │  ├─ constants.js
│  │  ├─ helpers.js
│  │  ├─ soundEffects.js
│  │  └─ textGenerator.js
│  │
│  ├─ App.jsx
│  ├─ App.module.css
│  ├─ index.css
│  └─ main.jsx
│
├─ .gitignore
├─ package.json
├─ package-lock.json
├─ README.md
├─ LICENSE
└─ vite.config.js

Key Concepts Used:

Reusable Components
Custom Hooks
Context API
Clean Code Structure

Development Process

The development process included:

Planning UI and features
Creating folder structure
Building reusable components
Implementing logic using custom hooks
Styling with CSS Modules
Testing and debugging
Deployment

Deployment

The application is deployed on Vercel.

Deployment challenges helped me learn:

Build configuration
Fixing deployment errors
Optimizing project for production

What I Learned

This project helped me improve:

React architecture understanding
State management
Custom hooks usage
Project structuring
Debugging and deployment skills

Final Thoughts

Although this is a practice project, it reflects my learning journey and passion for web development.

I believe consistent practice and building projects like this are the key to becoming a strong developer.

Feedback

I would appreciate your feedback and suggestions.

If you like this project, feel free to:

⭐ Star the repository
Share the project
Leave your feedback

Thank You

Thanks for reading this blog. More projects coming soon!

Author

Muhammad Yasir

Building My Personal Portfolio Website: Design, Decisions and Growth

Tue, 20 Jan 2026 18:32:01 +0000

Building My Personal Portfolio Website: Design, Decisions and Growth

Over the past few days, I’ve been actively working on my personal portfolio website—not just as a showcase of projects, but as a reflection of my learning journey, mindset and growth as a developer.

This portfolio is being built with a clear goal in mind: clarity, simplicity and strong first impressions.

Why I Decided to Rebuild My Portfolio

A portfolio is often the first interaction someone has with a developer. I wanted mine to clearly answer three questions:

Who am I as a developer?
What skills do I bring to the table?
How do I approach design and user experience?

Rather than overloading it with animations or unnecessary complexity, I chose to focus on clean structure, readable content and purpose-driven design.

Design & UI Approach

My primary focus was on keeping the interface modern yet minimal. I paid close attention to:

Layout hierarchy to guide the user naturally
Typography for readability and balance
Spacing and alignment for a clean visual flow

The hero section plays a key role here—it sets the tone of the entire website and delivers the core message within seconds.

Screenshot Placement:

Technical Perspective

From a technical standpoint, I focused on building a structure that is:

Responsive across different screen sizes
Easy to maintain and extend
Cleanly organized for scalability

The goal wasn’t just to make something that looks good but something that is practical, efficient and future-ready.

Challenges & Learnings

While working on this portfolio, I faced many big and small but important challenges—especially around layout consistency and responsive behaviour. Solving these helped me better understand:

How small UI decisions impact overall UX
The importance of testing designs across devices
Writing cleaner more reusable code

Each section I complete adds more clarity—not just to the website but to my own development process.

What’s Next

This is still a work in progress. Upcoming improvements include:

Additional sections with more detailed content
Performance optimizations
Refining responsiveness and accessibility

I believe in building in public, sharing progress honestly and improving step by step.

Final Thoughts

This portfolio is more than a personal website—it’s a snapshot of where I am right now as a developer and where I’m heading next.

Still building. Still improving. One section at a time.

If you’re also working on your portfolio or learning web development, I’d love to hear about your experience.

Connect With Me & View Related Posts

LinkedIn: https://www.linkedin.com/in/yasirawan4831

Medium: https://medium.com/@YasirAwan4831

All Links: https://yasirawan4831.github.io/futuristic-links-dashboard/

_#WebDevelopment #Portfolio #FullStackDeveloper #WebDevelopement #BuildingInPublic #MuhammadYasir #YasirAwan4831
_

From Learning to Recognition: My Journey as a Web Developer

Thu, 15 Jan 2026 08:34:06 +0000

As a learner and aspiring professional in the tech industry, every small milestone matters. Recently, I experienced one such moment when Shine Pak Talent Hub featured my profile as a Creative Graphic Designer and Full-Stack Web Developer.

This recognition was not just about visibility — it was a reminder that consistent learning and practice always pays off.

Building Skills Through Consistent Learning:

I am currently an IT student and actively building my career in Web Development. Over time, I have worked on multiple projects using React, TypeScript, Node.js, API, JavaScript, Python, MongoDB and MySQL, focusing on creating clean, responsive and user-friendly interfaces.

Alongside development, I also work with graphic design tools to improve visual presentation and user experience. This combination has helped me understand how design and functionality work together in real-world products.

Why This Recognition Matters

Being featured by a talent platform like Shine Pak Talent Hub motivated me to keep improving — not only technically but also professionally. It highlighted the importance of:

Personal branding
Showcasing real work
Sharing progress publicly
Staying consistent, even during slow phases

For learners and early-career developers such recognition builds confidence and pushes you to aim higher.

Lessons I’ve Learned So Far

Through my learning journey and internships, I’ve realized that growth comes from:

Practicing daily, even small tasks
Documenting learning through blogs and posts
Sharing progress instead of waiting for perfection
Balancing technical skills with communication and visibility

Platforms like Hashnode, Dev.to and CoderLog help me track this journey and connect with like-minded developers.

What’s Next?

I plan to continue building projects improving full-stack skills and sharing my learning openly. This recognition is just one step — the real goal is long-term growth and impact.

To anyone starting out:
Keep learning. Keep building. Keep sharing.

#WebDevelopment #LearningJourney #FrontendDevelopment #FullStackDeveloper #PersonalBranding #CareerGrowth #TechCommunity #MuhamadYasir #YasirAwan4831