{"id":22372185,"url":"https://github.com/merteldem1r/TenXWeb","last_synced_at":"2025-07-30T21:31:53.596Z","repository":{"id":173752582,"uuid":"625222134","full_name":"merteldem1r/TenXWeb","owner":"merteldem1r","description":"TenXWeb is my personal collection of different Web development projects, designed to develop from fundamental concepts of vanilla JavaScript to intermediate \u0026 advanced ReactJS and Backend applications with NodeJS.","archived":false,"fork":false,"pushed_at":"2025-03-24T22:47:22.000Z","size":23175,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T04:09:38.975Z","etag":null,"topics":["alogrithms","backend","css","custom-hooks","data-structures","expressjs","frontend","html","javascript","material-ui","nodejs","reactjs","redux-toolkit","tailwindcss","typescript","web-development","web-games"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/merteldem1r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-04-08T12:49:51.000Z","updated_at":"2025-03-24T22:48:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"8b51b3a0-0b17-4e90-a62d-969903f825b5","html_url":"https://github.com/merteldem1r/TenXWeb","commit_stats":null,"previous_names":["merteldem1r/youtube-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/merteldem1r/TenXWeb","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merteldem1r%2FTenXWeb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merteldem1r%2FTenXWeb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merteldem1r%2FTenXWeb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merteldem1r%2FTenXWeb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merteldem1r","download_url":"https://codeload.github.com/merteldem1r/TenXWeb/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merteldem1r%2FTenXWeb/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267945016,"owners_count":24170214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alogrithms","backend","css","custom-hooks","data-structures","expressjs","frontend","html","javascript","material-ui","nodejs","reactjs","redux-toolkit","tailwindcss","typescript","web-development","web-games"],"created_at":"2024-12-04T20:34:00.599Z","updated_at":"2025-07-30T21:31:53.586Z","avatar_url":"https://github.com/merteldem1r.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TenXWeb - 10x Growth In Web Development 🚀\n\n\u003cp align=\"start\"\u003e\n  \u003ca href=\"https://skillicons.dev\"\u003e\n    \u003cimg src=\"https://skillicons.dev/icons?i=javascript,typescript,react,nodejs,expressjs,mongodb,redux,html,css,tailwind,materialui,postman,webstorm,vscode\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**TenXWeb** is my personal collection of **10 different Web development projects**, designed to develop from fundamental concepts of **vanilla JavaScript** to intermediate \u0026 advanced **ReactJS** and **Backend** applications with **NodeJS**.\n\n**NOTE**: **None** of **AI tools were used** while developing projects.\n\n## NEW YEAR COUNTDOWN\n\nSmall and simple but good looking **web page** where whe show **countdown to the New Year**.\n\nImplemented using **JavaScript**, **HTML** and **CSS**. Learning and creating **async** `setInterval` function and some small methods to **calculate dates**.\n\n- Live: https://merteldem1r.github.io/new-year-countdown/\n- Topics: **JavaScript**, **HTML**, **CSS**\n\n### Project Preview\n\n\u003cimg width=\"400\" alt=\"SCR-20250304-cgsb\" src=\"https://github.com/user-attachments/assets/f1c34927-2c5c-4624-8e18-1ee5d67c889b\" /\u003e \u003cimg width=\"400\" alt=\"SCR-20250304-cheo\" src=\"https://github.com/user-attachments/assets/9870939e-e5a4-4ef1-846a-47512974dfa9\" /\u003e\n\n## MUSIC PLAYER\n\nMusic Player application that allows you to **read mp3 files** and **play** them on the **web** application. Created using **vanilla JavaScript**, **HTML** and **CSS**.\n\nImplementing player control functions with **JavaScript** and **Object Oriented Programming (OOP)**. Creating `Music` and `MusicPlayer` Classes with **control methods**.\n\n- Live: https://music-player-merteldem1r.netlify.app/\n- Topics: **JavaScript**, **Object Oriented Programming**, **DOM**, **HTML**, **CSS**,\n\n### Project Preview\n\n\u003cimg width=\"400\" alt=\"SCR-20250304-blaw\" src=\"https://github.com/user-attachments/assets/7b571416-958d-4d5f-90c1-84dc845dfe50\" /\u003e \u003cimg width=\"400\" alt=\"SCR-20250304-bktt\" src=\"https://github.com/user-attachments/assets/0a02fb50-dc86-4b74-af06-aff1eaaab55e\" /\u003e\n\n## MEME GENERATOR\n\nThis 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.\n\nHere have implemented basic but must-have topics of each dynamic web application. Creating ReactJS concepts such as components and combine them together.\n\nMaking **API calls** to get random images for meme generation. Using standard **ReactJS hooks** such as `useState` and `useEffect`.\n\n- Live: https://mertleldem1r-meme-generator.netlify.app/\n\n- Topics: **ReactJS**, **API**, **Components**\n\n### Project Preview\n\n\u003cimg width=\"400\" src=\"https://github.com/user-attachments/assets/9621cdae-fe3c-4c24-b115-0247988cb09f\"\u003e \u003cimg width=\"400\" src=\"https://github.com/user-attachments/assets/c1d7c04a-206c-4712-820a-47342b66e6a8\"\u003e\n\n## QUIZZICAL GAME\n\nReactJS Game; set your game settings, answer the questions and see your results. Questions taken from the free Trivia database.\n\n**Implementing some intermediate concepts** while creating this web-game project like:\n\n**Reusable components** such as `Loader`,\n`Modal`, `Theme Button` etc.\n\nCreating seperate **util functions** to make line counts of components shorter and make code more **maintainable** \u0026 **reusable**. Implementing `timer`, `shuffle algorithm` and `options` utility functions.\n\nImplementing **custom hooks** `useFetching` and `useLocalStorage` from scratch for our usage purposes.\n\n- Live: https://merteldem1r-quizzical.netlify.app/\n\n- Topics: **ReactJS**, **Algorithms**, **Web Game**, **Custom Hooks**, **API**, **Local Storage**, **Components**, **Dark Theme**\n\n### Project Preview\n\n\u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/227804144-403f549b-ddc3-4f6a-8712-ee916c874407.png\"\u003e \u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/227804153-e173bac8-d6ed-41ce-801e-fd53e2fa12d1.png\"\u003e \u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/227804163-d099be68-c3c2-41de-9a19-ed6bb467d63f.png\"\u003e \u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/227804177-2c122a87-57e5-4e16-a676-85ed29690675.png\"\u003e\n\n## VANLIFE\n\n**Vanlife** is a **multipage dynamic ReactJS application** where the main purpose is implementing concepts of **React Router** and **Fake API fetching**.\n\nComplete illustration of using `RouterProvider`, `createBrowserRouter` and `Route` functions for multipage application with React. Multipage routing for main pages, vans and each van.\n\nCustom `useFetching` hook for our `vansService.js` functions to simulate API fetching.\n\n**Reusable UI components**; `button`, `Loader`, `Error` etc.\n\n- Live: https://merteldem1r-vanlife.netlify.app/\n\n- Topics: **ReactJS**, **React Router**, **Custom Hooks**, **Fake API**, **Reusable Components**\n\n### Project Preview\n\n\u003cimg width=\"260\" alt=\"SCR-20250304-ddnf\" src=\"https://github.com/user-attachments/assets/925025b5-269e-4ece-9e4b-5569823fdd0d\" /\u003e \u003cimg width=\"260\" alt=\"SCR-20250304-ddvt\" src=\"https://github.com/user-attachments/assets/ad1e8b2e-781f-491a-a8ed-ab402cfd94e1\" /\u003e \u003cimg width=\"260\" alt=\"SCR-20250304-ddzv\" src=\"https://github.com/user-attachments/assets/b5f10c63-f7b2-41f2-9c47-26510b583068\" /\u003e \u003cimg width=\"260\" alt=\"SCR-20250304-djko\" src=\"https://github.com/user-attachments/assets/e6e40463-1cb5-46ab-bc71-70111fd4fc7e\" /\u003e \u003cimg width=\"260\" alt=\"SCR-20250304-depo\" src=\"https://github.com/user-attachments/assets/16ec3f16-5d5d-41d6-9f5e-1e577d4eb40d\" /\u003e \u003cimg width=\"260\" src=\"https://user-images.githubusercontent.com/113149328/227801952-2d484883-c782-42f8-8380-416676f933d4.png\"\u003e\n\n**NOTE**: Figma file \u0026 Design taken from Bob Ziroll on [Scrimba](https://scrimba.com/home) platform.\n\n## YOUTUBE CLONE\n\nReact Youtube Clone project made with Material UI.\nIdea taken from Javascript Mastery.\n\nResponsive dynamic web application created with ReactJS, developing **YouTube video platform clone project**. Using **Material UI** which is open-source React component library.\n\n**Reusable UI components**; `Card`, `SearchFeed`, `Videos` etc.\n\n**YouTube v3 API** from **Rapid API** platform, to make requests, getting and searching videos that published on YouTube.\n\n- Live: https://merteldem1r-youtube-clone.netlify.app/\n\n- Topics: **ReactJS**, **React Router**, **Material UI**, **API**, **Reusable Components**\n\n### Project Preview\n\n\u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/230723461-a9396656-0bc8-4086-bca5-5fdfbf524cee.png\"\u003e \u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/230723442-0287b85a-6d3a-4e28-994c-87bdf8d4f619.png\"\u003e \u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/230723502-b03924ca-dbfc-44ed-9714-d03ad0f84249.png\"\u003e \u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/113149328/230723532-ff0f967b-6266-4491-84e3-b34706bbcc4a.png\"\u003e\n\n**NOTE**: Project idea taken from [JavaScript Mastery](https://www.youtube.com/@javascriptmastery/featured)\n\n# For React Projects\n\nThere is some applications using React that built with [Vite](https://vitejs.dev/) and [Create React App](https://create-react-app.dev/).\n\n## Getting Started\n\nFollow the steps below to run the project locally.\n\n### Prerequisites\n\nMake sure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (LTS version recommended)\n- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\n\n## Running the Project\n\n### Vite\n\nIf you are using Vite, run the following commands:\n\n```sh\n# Install dependencies\nnpm install  # or yarn install\n\n# Start development server\nnpm run dev  # or yarn dev\n```\n\n### Create React App (CRA)\n\nIf you are using Create React App, run the following commands:\n\n```sh\n# Install dependencies\nnpm install  # or yarn install\n\n# Start development server\nnpm start  # or yarn start\n```\n\n## Building the Project\n\n### Vite\n\nTo build the Vite project for production:\n\n```sh\nnpm run build  # or yarn build\n```\n\n### Create React App (CRA)\n\nTo build the Create React App project for production:\n\n```sh\nnpm run build  # or yarn build\n```\n\n## Deployment\n\nAfter building, you can deploy the `dist/` (for Vite) or `build/` (for CRA) folder to any static hosting service such as:\n\n- [Vercel](https://vercel.com/)\n- [Netlify](https://www.netlify.com/)\n- [GitHub Pages](https://pages.github.com/)\n\n## License\n\nTenXWeb is licensed project under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerteldem1r%2FTenXWeb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerteldem1r%2FTenXWeb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerteldem1r%2FTenXWeb/lists"}