Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tauqueeralam42/full-stack-web-developer

Explore my personal Full-Stack MERN (MongoDB, Express.js, React.js, Node.js) web development code base reflecting my journey in coding.
https://github.com/tauqueeralam42/full-stack-web-developer

Last synced: about 2 months ago
JSON representation

Explore my personal Full-Stack MERN (MongoDB, Express.js, React.js, Node.js) web development code base reflecting my journey in coding.

Awesome Lists containing this project

README 

        
# My Full Stack Web Development Journey



Welcome to my Full Stack Web Development journey repository! Here, I document my progress and learning as I navigate through the world of web development, from frontend to backend, using HTML, CSS, JavaScript, React, Node.js, Express.js, and MongoDB.



## Introduction



In this repository, I chronicle my experiences, challenges, and achievements as I learn the ropes of full-stack web development. This journey is not just about mastering technologies but also about understanding the principles and best practices that underpin modern web development.



# CSS Projects



### Project 1: [Parallax Effect Website](https://tauqueer-css-projects.netlify.app/1.parallax%20effect/)



A website featuring captivating parallax scrolling, enhancing user experience with visually dynamic backgrounds.



### Project 2: [Image Gallery](https://tauqueer-css-projects.netlify.app/2.image%20gallery/)



A user-friendly collection of images, offering showcasing diverse visuals in an attractive layout.



**For a live demo of these projects, visit [here](https://tauqueer-css-projects.netlify.app/).**



# JavaScript Projects



### Project 1: [Random Password Generator](https://tauqueer-javascript-projects.netlify.app/6.passwordgenerator/)



The Random Password Generator is a simple web application that allows users to generate secure, random passwords. The application offers customizable options to include numbers, uppercase letters, lowercase letters, and symbols. Additionally, users can specify the length of the password and easily copy the generated password to the clipboard.



### Features

- **Password Length:** Users can set the desired length of the password, ranging from 1 to 128 characters.

- **Include Numbers:** Option to include numerical digits (0-9) in the password.

- **Include Uppercase Letters:** Option to include uppercase alphabetic characters (A-Z).

- **Include Lowercase Letters:** Option to include lowercase alphabetic characters (a-z).

- **Include Symbols:** Option to include special characters (e.g., !@#$%^&*()) in the password.

- **Copy to Clipboard:** Convenient button to copy the generated password to the clipboard with a single click.



### Project 2: [BMI Calculator](https://tauqueer-javascript-projects.netlify.app/2.bmicalculator/)



A simple web app to calculate Body Mass Index (BMI) based on user input for height and weight. The app also provides a BMI range to determine if the user is underweight, normal weight, overweight, or obese.



### Features

- **Height Input:** Users can enter their height in centimeters.

- **Weight Input:** Users can enter their weight in kilograms.

- **BMI Calculation:** Calculates the BMI based on the input height and weight.

- **BMI Range:** Indicates whether the user is underweight, normal weight, overweight, or obese.



### Project 3: [Weather App](https://tauqueer-javascript-projects.netlify.app/7.weatherapp/)



A web app to get weather information based on the user's location or any city name. The app provides detailed weather data including current temperature, feels-like temperature, sunrise and sunset times, wind speed, cloudiness, and humidity.



### Features

- **Your Weather:** Automatically fetches and displays the weather report for the user's current location based on their coordinates.

- **Search by City:** Allows users to search for the weather of any city by entering the city name.

- **Weather Data:** Provides the following details:

  - Current temperature

  - Feels-like temperature

  - Sunrise time

  - Sunset time

  - Wind speed

  - Cloudiness

  - Humidity



### Project 4: [Guess the Number](https://tauqueer-javascript-projects.netlify.app/4.guessthenumber/)



A simple web game where users have 5 chances to guess a randomly generated number. The game provides feedback on whether the guessed number is higher or lower than the target number and displays a list of all guesses made by the user.



### Features

- **Random Number Generation:** Generates a random number between 1 and 100.

- **User Input:** Allows the user to input their guess.

- **Feedback:** Informs the user if their guess is too high, too low, or correct.

- **Guess History:** Displays a list of all guesses made by the user.

- **Limited Attempts:** Users have 5 chances to guess the correct number.



### Project 5: [Tic Tac Toe](https://tauqueer-javascript-projects.netlify.app/8.tictactoe/)



A web-based Tic Tac Toe game where two players can play against each other. The game provides information about the current player's turn, the game winner, or if the game is tied. A new game button appears when the game is over or tied. If a user wins, the winning combination is highlighted in green, and no further moves are allowed.



### Features

- **Current Turn Indicator:** Displays which player's turn it is.

- **Game Winner:** Announces the winner and highlights the winning combination in green.

- **Game Tie:** Announces if the game is tied.

- **New Game Button:** Allows players to start a new game once the current game is over.

- **Interactivity:** Players can click on the grid to make their moves until the game is over.





**To see more of my JavaScript mini projects, you can click on the given link. [here](https://tauqueer-javascript-projects.netlify.app/).**



# React Projects



### Project: [Random GIF Generator](https://tauqueer-random-gif-generator.netlify.app/)



The Random GIF Generator is a web application built with React.js that allows users to generate and view random GIFs. The application utilizes the Giphy API and Axios to fetch data from the API. It features two cards: one that automatically displays a random GIF and another that allows users to search for GIFs by category according to their preferences.



### Features

- **Random GIF:** Automatically displays a random GIF upon loading the application.

- **Search by Category:** Users can search for GIFs by entering a category or keyword in the search input.

- **Two Display Cards:** 

  - **Card 1:** Displays a random GIF fetched from the Giphy API.

  - **Card 2:** Allows users to search for and display GIFs based on their preferred category.

- **Responsive Design:** The application is designed to be responsive and works well on various screen sizes.

- **API Integration:** Utilizes the Giphy API to fetch random and category-based GIFs.

- **Axios for HTTP Requests:** Uses Axios for making HTTP requests to the Giphy API.



### Project: [React Blog Website](https://tauqueer-react-blog.netlify.app/)



This project is a learning exercise focused on understanding and implementing the useContext hook in React. Through this project, you explored how to manage global state efficiently and provide data across components using React's Context API. The blog website fetches data from an API, demonstrating the use of fetch to retrieve JSON data.



### Features Explored

- **useContext Hook:** Implemented to manage global state and share data between components without prop drilling.

- **Component Communication:** Demonstrated how useContext simplifies passing data down through component hierarchies.

- **State Management:** Explored how to create a provider and consumer pattern to manage application-wide state.

- **API Integration:** Used fetch to get JSON data from an API, showcasing how to work with external data sources in a React application.

- **Learning Exercise:** Designed as a hands-on project to deepen understanding of React's Context API and hooks.