https://github.com/merteldem1r/TenXWeb
TenXWeb is my personal collection of different Web development projects, designed to develop from fundamental concepts of vanilla JavaScript to intermediate & advanced ReactJS and Backend applications with NodeJS.
https://github.com/merteldem1r/TenXWeb
alogrithms backend css custom-hooks data-structures expressjs frontend html javascript material-ui nodejs reactjs redux-toolkit tailwindcss typescript web-development web-games
Last synced: 8 months ago
JSON representation
TenXWeb is my personal collection of different Web development projects, designed to develop from fundamental concepts of vanilla JavaScript to intermediate & advanced ReactJS and Backend applications with NodeJS.
- Host: GitHub
- URL: https://github.com/merteldem1r/TenXWeb
- Owner: merteldem1r
- License: mit
- Created: 2023-04-08T12:49:51.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-24T22:47:22.000Z (12 months ago)
- Last Synced: 2025-06-21T04:09:38.975Z (9 months ago)
- Topics: alogrithms, backend, css, custom-hooks, data-structures, expressjs, frontend, html, javascript, material-ui, nodejs, reactjs, redux-toolkit, tailwindcss, typescript, web-development, web-games
- Language: JavaScript
- Homepage:
- Size: 22.1 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TenXWeb - 10x Growth In Web Development 🚀
**TenXWeb** is my personal collection of **10 different Web development projects**, designed to develop from fundamental concepts of **vanilla JavaScript** to intermediate & advanced **ReactJS** and **Backend** applications with **NodeJS**.
**NOTE**: **None** of **AI tools were used** while developing projects.
## NEW YEAR COUNTDOWN
Small and simple but good looking **web page** where whe show **countdown to the New Year**.
Implemented using **JavaScript**, **HTML** and **CSS**. Learning and creating **async** `setInterval` function and some small methods to **calculate dates**.
- Live: https://merteldem1r.github.io/new-year-countdown/
- Topics: **JavaScript**, **HTML**, **CSS**
### Project Preview
## MUSIC PLAYER
Music Player application that allows you to **read mp3 files** and **play** them on the **web** application. Created using **vanilla JavaScript**, **HTML** and **CSS**.
Implementing player control functions with **JavaScript** and **Object Oriented Programming (OOP)**. Creating `Music` and `MusicPlayer` Classes with **control methods**.
- Live: https://music-player-merteldem1r.netlify.app/
- Topics: **JavaScript**, **Object Oriented Programming**, **DOM**, **HTML**, **CSS**,
### Project Preview
## MEME GENERATOR
This ReactJS application as the name says it is a small meme generating project based on randomly fetched meme picture and adding words on top of that.
Here have implemented basic but must-have topics of each dynamic web application. Creating ReactJS concepts such as components and combine them together.
Making **API calls** to get random images for meme generation. Using standard **ReactJS hooks** such as `useState` and `useEffect`.
- Live: https://mertleldem1r-meme-generator.netlify.app/
- Topics: **ReactJS**, **API**, **Components**
### Project Preview
## QUIZZICAL GAME
ReactJS Game; set your game settings, answer the questions and see your results. Questions taken from the free Trivia database.
**Implementing some intermediate concepts** while creating this web-game project like:
**Reusable components** such as `Loader`,
`Modal`, `Theme Button` etc.
Creating seperate **util functions** to make line counts of components shorter and make code more **maintainable** & **reusable**. Implementing `timer`, `shuffle algorithm` and `options` utility functions.
Implementing **custom hooks** `useFetching` and `useLocalStorage` from scratch for our usage purposes.
- Live: https://merteldem1r-quizzical.netlify.app/
- Topics: **ReactJS**, **Algorithms**, **Web Game**, **Custom Hooks**, **API**, **Local Storage**, **Components**, **Dark Theme**
### Project Preview
## VANLIFE
**Vanlife** is a **multipage dynamic ReactJS application** where the main purpose is implementing concepts of **React Router** and **Fake API fetching**.
Complete illustration of using `RouterProvider`, `createBrowserRouter` and `Route` functions for multipage application with React. Multipage routing for main pages, vans and each van.
Custom `useFetching` hook for our `vansService.js` functions to simulate API fetching.
**Reusable UI components**; `button`, `Loader`, `Error` etc.
- Live: https://merteldem1r-vanlife.netlify.app/
- Topics: **ReactJS**, **React Router**, **Custom Hooks**, **Fake API**, **Reusable Components**
### Project Preview
**NOTE**: Figma file & Design taken from Bob Ziroll on [Scrimba](https://scrimba.com/home) platform.
## YOUTUBE CLONE
React Youtube Clone project made with Material UI.
Idea taken from Javascript Mastery.
Responsive dynamic web application created with ReactJS, developing **YouTube video platform clone project**. Using **Material UI** which is open-source React component library.
**Reusable UI components**; `Card`, `SearchFeed`, `Videos` etc.
**YouTube v3 API** from **Rapid API** platform, to make requests, getting and searching videos that published on YouTube.
- Live: https://merteldem1r-youtube-clone.netlify.app/
- Topics: **ReactJS**, **React Router**, **Material UI**, **API**, **Reusable Components**
### Project Preview
**NOTE**: Project idea taken from [JavaScript Mastery](https://www.youtube.com/@javascriptmastery/featured)
# For React Projects
There is some applications using React that built with [Vite](https://vitejs.dev/) and [Create React App](https://create-react-app.dev/).
## Getting Started
Follow the steps below to run the project locally.
### Prerequisites
Make sure you have the following installed:
- [Node.js](https://nodejs.org/) (LTS version recommended)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
## Running the Project
### Vite
If you are using Vite, run the following commands:
```sh
# Install dependencies
npm install # or yarn install
# Start development server
npm run dev # or yarn dev
```
### Create React App (CRA)
If you are using Create React App, run the following commands:
```sh
# Install dependencies
npm install # or yarn install
# Start development server
npm start # or yarn start
```
## Building the Project
### Vite
To build the Vite project for production:
```sh
npm run build # or yarn build
```
### Create React App (CRA)
To build the Create React App project for production:
```sh
npm run build # or yarn build
```
## Deployment
After building, you can deploy the `dist/` (for Vite) or `build/` (for CRA) folder to any static hosting service such as:
- [Vercel](https://vercel.com/)
- [Netlify](https://www.netlify.com/)
- [GitHub Pages](https://pages.github.com/)
## License
TenXWeb is licensed project under the [MIT License](LICENSE).