Projects
-
REST Countries API with color theme switcher
- REACT
- TypeScript
- Zustand(State Manager)
- Apollo Client
- TailwindCSS
- REACT ROUTER
- VITE
- GRAPHQL
- Apollo Server 4
- MongoDB
- MongoDB Atlas
- EXPRESS
- NODEJS
A Frontend Mentor Challenge Solution. Where the user can review a certain country. Users can also search, filter and also change color theme.
Overview: This site uses GRAPHQL as a query language, The server is built on A MERN app speaking a language of GRAPHQL by the help of Apollo Server 4. While in the client side the App is built on React Typescript using Zustand as a browser state manager and Apollo Client to get the countries data from the server.
-
Interactive comments section
- MongoDB
- EXPRESS
- REACT
- NODEJS
- Mongoose
- MongoDB Atlas
- JSON WEB TOKENS (JWT)
- REACT HOOKS
- TailwindCSS
- REACT ROUTER
- VITE
- Cloudinary API
A Frontend Mentor Challenge Solution. Where the user interacts in the comment section. The user can create new comment, reply from a comment, reply from a reply, delete own comment, upvote and downvote.
Additional Features:
- - Built into a MERN App
- - Login Page
- - Signup Page
- - on Signup Page users can preview their chosen avatars
- - Unauthenticated users can't interact and will be asked to register or login first
- - images are stored and fetch in a 3rd party API from Cloudinary
- - data are stored on MongoDB Atlas
Things to note: upon testing the site, server automatically spun down after 15 minutes of inactivity. When a new request comes in, It will spins it up again after 30secs.
try creating an account so you can test its functionality ^^ password should contain atleast
- 1 capital
- 1 small letters
- 8 chars
- 1 number
- 1 special char
- like this qweQWE123!
-
Crowdfunding product page(React)
- React
- Typescript
- Tailwindcss
- Zustand
- Vite
- JSONBIN
A Frontend Mentor Challenge Solution. Where the user is given a choice to pledge for the project and choose a reward.
Overview: The site will check if a certain data exist in the localstorage then gets it, if it didn't exist the data is fetch from a remote rest api, the api is hosted on a JSON Server on JSONBIN.io. Mutation of data is persisted in the localstorage.
-
Todo App
- REACT
- REACT HOOKS
- REACT CONTEXT API
- REACT Reducer Hook
- Tailwindcss
- GSAP
- Vite
A Frontend Mentor Challenge Solution. Where the user can add todo items, mark the item if it is completed, delete it one by one or clearing all completed items, sort it or drag and drop it to sort it. Users can also choose color theme between light or dark.
Overview: This app uses React Context API to pass state across components. Which the data is stored on a React Reducer Hook and persisted and stored in localstorage.
Also added some animations using GSAP
-
-
Newsletter signup form with success message
- REACT
- REACT HOOKS
- TailwindCSS
- VITE
- Storybook 7
A Frontend Mentor Challenge Solution, the challenge was to build a Newsletter Signup Form with success message after submitting the form. Also the design are coming from an image file.
To describe my solution users will input their email and the email entered will be validated if it exist and valid, If the form submission is successful the email is added as an audience to my newsletter in mailchimp.
I also built an Storybook for this challenge, where you will be able to see the figma design as an storybook addon and also there are test suites included as a storybook addon. same as the figma design.
-
Space Tourism Website
- REACT
- REACT HOOKS
- TailwindCSS
- REACT ROUTER
- VITE
A Frontend Mentor Challenge Solution, the challenge was to build a space tourism website from a figma design with 4 pages and the data are kept inside a json file, image assets are also included.
My approach upon building this is to make the data live as an API so i could easily fetch the data with an react app. So i ended up hosting the JSON File on JSONBIN.io as a JSON Server.
Also added some animations using Framer Motion
-
Luto
- React
- React Hooks
- React Router
- React Icons
- CSS Module
- API
A Recipe site built with CodeSandbox using basic React Hooks ( UseState Hook and UseEffect Hook ). And also integrating a free tier API coming from www.edamam.com.
-
Social Media Dashboard with theme switcher
- HTML5
- Tailwindcss
- Vanilla JS
- ES6 Module
- GSAP
A Frontend Mentor Challenge Solution to build a dashboard from a image design since only premium users can access the figma design.
Also added some animations that animates the values from 0 to the expected value using GSAP and with additional feature that changes the color theme.
-
Advice generator app
- HTML5
- SASS
- Vanilla JS
- JS Module
- GSAP
- GSAP Text Plugin
A Frontend Mentor Challenge Solution That generates a random advice on page load coming from an API and also by clicking or pressing the dice button. The third Party API that is used comes from api.adviceslip.com.
-
Sunnyside Agency Landing Page
- HTML
- SASS
- Vanilla JS
- Webpack
A landing page challenge from www.frontendmentor.io built with core HTML, dart SASS and Webpack with a little JS for the menu burger. Also follows mobile first approach strategy on designing it's style.
-
Crowdfunding product page
- Vanilla JS
A product page challenge from www.frontendmentor.io built purely with only Vanilla JS. The Products data comes from a local JSON file which is built with the site. And also to take note, the product state will revert every page refresh.
-
Intro component with sign-up form
- HTML
- CSS
- Vanilla JS
A form page challenge from www.frontendmentor.io built with core HTML5, CSS3, Vanilla JS. This site validates the input fields of the form using some RegEx methods specially in email & password input field. This site also has introductory animation built purely with CSS animations, This site also follows mobile first approach strategy and lastly the Javascript code pattern uses ES6 Classes.
-
-
Blogr landing page
- HTML
- CSS
- Vanilla JS
A landing page challenge from www.frontendmentor.io built with core HTML5, CSS3 and a little Vanilla JS for the navigation component. This site follows the mobile first approach strategy on styling the webpage and also this site also has an introductory animation built with CSS animation.
-
Tip Calculator App
- HTML
- SASS
- Vanilla JS
- Webpack
A component page challenge from www.frontendmentor.io built with HTML5, SASS, Vanilla JS and Webpack, Where the app calculates the bill to each available person including the tip. This site follows the mobile first approach on styling the webpage. And also this page uses JavaScript ES6 module
