DEV Community: Shaif Arfan

React.JS Project | Next.js | React Query

Shaif Arfan — Sun, 11 Sep 2022 12:41:05 +0000

Meal-khuj

A React app, where you can find meals recipe and save your favorite recipe for later.

live preview: https://meal-khuj.netlify.app

youtube-tutorial: https://youtu.be/JtfduKrxRH8

live-streams: twitch

API used: themealdb

Full Tutorial

Things we are going to learn/use

React.js
Next.js
React Query
React Hot Toast
Axios
more...

Other projects

📚 All Web Cifar Projects

Feedback

If you have any feedback, please reach out to us at @web_cifar, or webcifar@gmail.com

Get Support

For support, join our Community Group.

Happy Coding! ✨🚀

MERN stack project for beginners

Shaif Arfan — Tue, 09 Aug 2022 14:25:00 +0000

Youtube Tutorial: https://youtu.be/7s7RHc_8SaU
Source Code: github repo

Made with ❤️ by Shaif Arfan

Project Details

This project is for beginners only. In this project we are going to create a task management app (todo app). Where user create register an account with name, email, password. Inside the app user can create tasks, check tasks and delete tasks. Beside that user can update their own profile.

It is a simple app. In the project we didn't focus on styles, so the ui is simple.

What we are going to learn/use

Requirements

Basic knowledge of react and express.
if you don't have basic knowledge of express, then you can watch these videos simple crud with express and mongoDb, jwt auth with express.

Getting Started

You can follow our complete youtube tutorial

Other projects

📚 All Web Cifar Projects

Feedback

If you have any feedback, please reach out to us at @web_cifar, or webcifar@gmail.com

Get Support

For support, join our Community Group.

Happy Coding! ✨🚀

React Tailwind Portfolio

Shaif Arfan — Fri, 27 May 2022 09:25:20 +0000

A simple responsive portfolio website with dark mode feature.

Live Preview:https://react-tailwind-portfolio.surge.sh/

Watch on Youtube: https://youtu.be/QTY2fLpQn44

Made with ❤️ by Shaif Arfan

Technologies used:

Other projects

📚 All Web Cifar Projects

FAQ

Q: How can i get started?

You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: YouTube Video.

Q: I can use this project for my website?

Yes you can. It absolutely free to use. If you want to support the project, you can buy me a coffee.

Feedback

If you have any feedback, please reach out to us at @web_cifar

Support

For support, join our Community Group.

License

MIT

Happy Coding! ✨🚀

React Blog Website Using JAMstack (Gatsby.js & Sanity.io)

Shaif Arfan — Tue, 26 Apr 2022 11:27:51 +0000

TechHub-Blog

A complete blog website created with JAMstack. (Gatsby.js & Sanity.io)

Live Preview: http://techhub-blog.vercel.app/
Source Code:https://github.com/ShaifArfan/techHub-blog
YouTube Tutorial: 🔗Playlist
Made with ❤️ by Shaif Arfan

Project Details

TechHub-blog is a complete tech blog website. Here we will see three post types: blogs, categories, and authors. We will create relations between these three post types. So that we can create a blog post with a category and an author. Also we will make a search feature where we can search against all these three post types.

To create this website we will use JAMstack. We will use Gatsby.js for the frontend and Sanity.io for the headless CMS. And to source our content we will use graphql.

What we are going to learn/use

React.js
Gatsby.js
- Gatsby-plugin-image
- Static Image & Gatsby Image
- Gatsby Page
- Normal Pages
- how to create pages programmatically
- Gatsby Pagination
- Gatsby-plugin-local-search
- GraphQL
- Static Query & Page Query
Sanity.io
- Sanity Schema
- Custom Blocks
- Custom Rich-text Block to Write Blog
- Custom Code Block
- Studio Customization
React-PortableText
Axios
Many More...

Requirements

Basic knowledge of HTML, CSS, and JavaScript
Experience with React.js

Starter files

You can find all the starter files in starter-files branch. You can to go to the starter-files branch and download zip the the starter files or You can clone the project and git checkout to starter-files branch.

Getting Started

You can follow our complete youtube tutorial Playlist
or You can clone the project and git checkout to starter-files branch to get started.

Tools Used

Images: Unsplash
UI Design: Figma
Code Editor: VS Code

Other projects

📚 All Web Cifar Projects

FAQ

Q: How can i get started?

You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: Playlist.

Q: I can use this project for my website?

Yes you can. It absolutely free to use.

Feedback

If you have any feedback, please reach out to us at @web_cifar

Support

For support, join our Community Group.

License

MIT

Happy Coding! ✨🚀

A Complete React Todo App using React, Redux, Framer Motion

Shaif Arfan — Tue, 18 Jan 2022 13:09:09 +0000

React Todo App.

A complete todo application with all features.

Made with ❤️ by Shaif Arfan

live demo: https://wc-react-todo-app.netlify.app/

Watch On Youtube: https://youtu.be/W0Uf_xu350k

More Projects on https://github.com/ShaifArfan/wc-project-tutorials

Project Description

In the project, we will be creating a Complete Todo Application with all features. We will do all the CRUD operations. We will to use React.js and to manage our states, we will use Redux. Also we will learn to make simple animations using Framer Motion. This will be a complete beginner friendly app. Hope you enjoy it.

What we are going to learn/use

Requirements

Basic ReactJs knowledge
Basic HTML, CSS knowledge

Starter files

You can find all the starter files in starter-files branch. You can to go to the starter-files branch and download zip the the starter files or You can clone the project and git checkout to starter-files branch.

Getting Started

The recommended way to get started with the project is Follow the YouTube tutorial. You will find all the step-by-step guides. Or you Can start the project on your own by following the guide below.

After getting the starter files, you need to go the file directory and run

npm install

and after that start the dev server.

npm start

Tools Used

Favicon: Flaticon.com
Code Editor: VS Code

FAQ

Q: How can i get started?

You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: [coming soon].

Q: What i need to start the project?

Just open your favorite code editor and follow along with the YouTube tutorial.

Q: Who the project is for?

The project is for the people who wanna get more skilled in ReactJs.

Feedback

If you have any feedback, please reach out to us at @web_cifar

Support

For support, join our Community Group.

License

MIT

More Projects on https://github.com/ShaifArfan/wc-project-tutorials

Happy Coding! 🚀

React JS Project With Dark Theme for Beginners

Shaif Arfan — Wed, 15 Dec 2021 11:36:46 +0000

Artistic 📸

Made with ❤️ by Shaif Arfan

Live preview: https://wc-artistic.netlify.app/

Watch on YouTube: https://youtu.be/DTR2IbNBfPA

Source Code: https://github.com/ShaifArfan/artistic

Project Description

Artistic is a landing page for a photography studio. This is a well-designed and responsive landing page with dark mode feature. The main purpose of this project is to show how to create a landing page with dark mode feature using ReactJs.
We will be using React Context API to toggle dark mode feature. Hope you enjoy it!.

What we are going to learn/use

Requirements

Basic ReactJs knowledge
Basic HTML, CSS knowledge

Starter files

Getting Started

The recommended way to get started with the project is Follow the YouTube tutorial. You will find all the step-by-step guides. Or you Can start the project on your own by following the guide below.

After getting the starter files, you need to go the file directory and run

npm install

and after that start the dev server.

npm start

Tools Used

Images: Unsplash
UI Design: Figma
Code Editor: VS Code

Similar Projects

Here are some Similar projects that you might be interested.

FAQ

Q: How can i get started?

You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: [coming soon].

Q: What i need to start the project?

Just open your favorite code editor and follow along with the YouTube Tutorial.

Q: Who the project is for?

The project is for the people who wanna get more skilled in ReactJs.

Feedback

If you have any feedback, please reach out to us at @web_cifar

Support

For support, join our Community Group.

License

MIT

Happy Coding! 🚀

HTML CSS full project

Shaif Arfan — Thu, 09 Dec 2021 17:05:12 +0000

Shaif's Cuisine 👨‍🍳

Live preview: https://shaif-s-cuisine.netlify.app/

Watch on YouTube: https://youtu.be/4y-_3Ayiauw

Source Code: https://github.com/ShaifArfan/shaif-s-cuisine

Project Description

A HTML, CSS project. Made with ♥ by the web cifar community. There will be 5 pages in the website (HomePage, MenuPage, AboutPage, ContactPage, BookingPage). In this project we gonna learn how we can create a website using simple HTML, CSS. The main purpose of the project is to get more used to with HTML, CSS. Although we used a few lines of JavaScript in the project for necessary cases. Later on, in this project, we gonna learn how we can deploy this site using Netlify. Also, we gonna learn the process from the zero to end and make the website ready for live production.

What we are going to learn

HTML, CSS
CSS Grid
Scroll Animation
Netlify Deployment
Netlify Form functionality
More. . .

Starter files

You can find all the starter files in starter_files branch. You can to go to the starter_files branch and download zip the starter files, or You can clone the project and git checkout to starter_files branch.

Requirements

Basic HTML, CSS

Tools Used

icons - (flat & Feather icons)
illustration - https://storyset.com/
UI Design: Figma
Code Editor: VS Code

FAQ

How can I get started?

You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: [coming soon].

What I need to start the project?

Just open your favorite code editor and follow along with the YouTube Tutorial[coming soon].

Who the project is for?

The project is for the people who wanna get more skilled in HTML & CSS.

Similar Projects

Here are some Similar projects that you might be interested.

Feedback

If you have any feedback, please reach out to us at @web_cifar

Support

For support, join our Community Group.

License

MIT

30days30submits (HTML, CSS, JS)

Shaif Arfan — Sun, 11 Jul 2021 12:51:21 +0000

#30days30submits

Boost your HTML, CSS, JS Skills with these small to medium projects.

In this challenge, I submitted 30 little to medium size projects. Sometimes I made a little website component or sometimes some JavaScript app as a submit. I did it to boost my HTML, CSS & JS skills. Down here you will find all the live previews and YouTube videos (how I made it). Also here is the full playlist for this #30days30submits challenge => playlist.

GitHub Repo: https://github.com/ShaifArfan/30days30submits

🤙 Follow Me: FB - IG - TW

🏦 Web Cifar: YT - FB - IG - TW - WEBSITE

day	Project Name	source Code/preview	YouTube Video
day-1	Custom Cursor	https://codepen.io/Web_Cifar/pen/OJMrzaB	https://youtu.be/de4W0EHMuUs
day-2	Theme Switcher	https://codepen.io/Web_Cifar/pen/OJMrdbq	https://youtu.be/D1yg4T37qYo
day-3	Random Dad Jokes Generator	https://codepen.io/Web_Cifar/pen/XWXOZWX	https://youtu.be/UDIfuvLEkjU
day-4	Numbers API	https://codepen.io/Web_Cifar/pen/PoZLpoG	https://youtu.be/s3LFCErzmHI
day-5	Countdown Timer	https://codepen.io/Web_Cifar/pen/OJMGPbb	https://youtu.be/_a4XCarxwr8
day-6	Featured Section	https://codepen.io/Web_Cifar/pen/WNrWxYG	https://youtu.be/L4k3_elYm2U
day-7	Photo gallery p-1	https://codepen.io/Web_Cifar/pen/wvMbwdj	https://youtu.be/URymtcPO11A
day-8	Photo gallery p-2 [Pexels API]	https://github.com/ShaifArfan/30days30submits/tree/master/day-8	https://youtu.be/gGBpmzLN1Hw
day-9	Read More Button	https://codepen.io/Web_Cifar/pen/OJMeVxx	https://youtu.be/TvVY8c1uvG8
day-10	key Code Generator App	https://codepen.io/Web_Cifar/pen/eYJwvKV	https://youtu.be/jOLwRV6xSwA
day-11	CSS animated Menu	https://codepen.io/Web_Cifar/pen/eYJqdxy	https://youtu.be/q8vmz-R_3Ck
day-12	CSS Flex Gallery	https://codepen.io/Web_Cifar/pen/wvMVmZN	https://youtu.be/Z6IZ2NOEzmw
day-13	Analog Clock	https://codepen.io/Web_Cifar/pen/LYNYmpb	https://youtu.be/6xEQ_jA5V2Y
day-14	Digital Clock	https://codepen.io/Web_Cifar/pen/MWyYaBP	https://youtu.be/gmNhRyxAPpw
day-15	BG Color Changer	https://codepen.io/Web_Cifar/pen/dyMPmwY	https://youtu.be/Yem8T8azZko
day-16	Basic Tooltips	https://codepen.io/Web_Cifar/pen/PoNqwNJ	https://youtu.be/MXRxahbJX3A
day-17	Scroll Down Button	https://codepen.io/Web_Cifar/pen/WNwvOaE	https://youtu.be/LY1jeQGUiAI
day-18	Advance Tooltips	https://codepen.io/Web_Cifar/pen/yLOYoPR	https://youtu.be/e_jEquJo7y8
day-19	Full Functional Html Form	https://codepen.io/Web_Cifar/pen/gOrrPpO	https://youtu.be/vc9rgFHr098
day-20	Multi Step Form	https://codepen.io/Web_Cifar/pen/PoNNEYY	https://youtu.be/cKTgIDkRsGc
day-21	CSS Loading animation	https://codepen.io/Web_Cifar/pen/jOqqRPM	https://youtu.be/E_jOrp4t0N4
day-22	Food Recipe App	https://codepen.io/Web_Cifar/pen/oNxLYRY	https://youtu.be/x8EY0BlhPGk
day-23	Neon Light Effect	https://codepen.io/Web_Cifar/pen/MWyJENV	https://youtu.be/NLtUycloTnc
day-24	Speech Recognition App	https://codepen.io/Web_Cifar/pen/jOqBEjE	https://youtu.be/-k-PgvbktX4
day-25	Custom Slider	https://codepen.io/Web_Cifar/pen/bGpRwEr	https://youtu.be/V9TCxMMpGhI
day-26	Bouncing DVD logo	https://codepen.io/Web_Cifar/pen/JjXrLRJ	https://youtu.be/wMIARRCox9k
day-27	Quiz APP	https://codepen.io/Web_Cifar/pen/dyMZxNg	https://youtu.be/qXXM9nVxLWk
day-28	Simple Calculator	https://codepen.io/Web_Cifar/pen/XWdVgXr	https://youtu.be/0Vg4EiYPCUc
day-29	Weather APP	https://codepen.io/Web_Cifar/pen/gOrvMpR	https://youtu.be/y0iCeKUsYMk
day-30	CSS Dot Loaders	https://codepen.io/Web_Cifar/pen/rNevXPx	https://youtu.be/ENa4y_-fJAs

React Portfolio Project

Shaif Arfan — Wed, 09 Jun 2021 17:43:57 +0000

Watch On YouTube: Watch Now

Source Code: Github

Live Preview: Open Link

Coded by - shaif Arfan | web cifar

Project Details

A portfolio for a web designer. We used React js to make this portfolio. A clean design with full responsiveness. You will find this portfolio very professional. Also, we added smooth scroll in the portfolio which will make the scroll experience really elegant.

This is a beginner-friendly react js project. There will be a full free step-by-step tutorial on YouTube. This project is made for education purposes by the Team web cifar. We are going to learn so many things through this project especially how to work with React Js. React Js is one of the hottest techs for web dev. Through this project, we will have a good understanding of react js. Besides React js we are going to use many other techs. Also, there will be a full project tutorial playlist on YouTube so that you can get the step-by-step guide to make this portfolio.

Project Requirement

HTML, CSS
JavaScript
React Basic (optional)

What we are going to Use/learn

React
React Hooks
Styled Components
Swiper js
React Transition Group
Smooth Scrollbar
React Icons
React Router Dom
More...

Starter Files

For the starter files, we created a branch in this repository named starter_files. You need to change the branch in the top corner of the repo then you will get the starter files and now you can clone the repo or download it.

Getting Started

The recommended way to get started with the project is Follow the YouTube tutorial. You will find all the step-by-step guides for free. Or you Can start the project on your own by following the guide below.

After getting the starter files, you need to go the file directory and run

npm install

and after that start the live server.

npm start

If you like the tutorial, please share this with others.

HTML CSS Portfolio Project.

Shaif Arfan — Mon, 05 Apr 2021 22:35:17 +0000

This project is for HTML & CSS practice. AMY is a fictional character. She is a freelance web designer. We made this nice portfolio for her with mainly HTML & CSS. Though we used few lines of JS, the main purpose of this project is to practice HTML & CSS. We are going to learn lots of things link how to make it responsive, how we can make a nice off-canvas menu, CSS animations, CSS flex layout, and many more. Hope you will like this video. Also, You can get the source code from the link down below.

Source Code: https://github.com/ShaifArfan/AMYs-Portfolio

Food Recipe App #30days30submits #day-22

Shaif Arfan — Thu, 12 Nov 2020 13:31:10 +0000

Quiz App #30days30submits #day-27

Shaif Arfan — Sat, 05 Sep 2020 07:42:51 +0000