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.
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
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,
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.
-
Topics: ReactJS, API, Components
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.
-
Topics: ReactJS, Algorithms, Web Game, Custom Hooks, API, Local Storage, Components, Dark Theme
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.
-
Topics: ReactJS, React Router, Custom Hooks, Fake API, Reusable Components
NOTE: Figma file & Design taken from Bob Ziroll on Scrimba platform.
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.
-
Topics: ReactJS, React Router, Material UI, API, Reusable Components
NOTE: Project idea taken from JavaScript Mastery
There is some applications using React that built with Vite and Create React App.
Follow the steps below to run the project locally.
Make sure you have the following installed:
If you are using Vite, run the following commands:
# Install dependencies
npm install # or yarn install
# Start development server
npm run dev # or yarn devIf you are using Create React App, run the following commands:
# Install dependencies
npm install # or yarn install
# Start development server
npm start # or yarn startTo build the Vite project for production:
npm run build # or yarn buildTo build the Create React App project for production:
npm run build # or yarn buildAfter building, you can deploy the dist/ (for Vite) or build/ (for CRA) folder to any static hosting service such as:
TenXWeb is licensed project under the MIT License.