About Yousef
Results-driven Front-End Developer with 3 years of experience specializing in React.js and Next.js.
Passionate about creating user-friendly and visually appealing web applications. Proven track record of
delivering high-quality code and collaborating effectively with cross-functional teams. Strong
problem-solving skills and a keen eye for detail. Dedicated to continuous learning and staying up-to-date
with the latest industry trends and best practices
my projects are here but I have 3 others that are not complete yet:
PROJECTS
Coffee MongoDB Next.js - January 2023
- Built server-side rendered UI using Next.js
- styling by Tailwind
- Managed the database using MongoDB
- Used Mongoose to model application data
- Designed and implemented a comment system using MongoDB, Mongoose, and Axios
- Provided live chat support using a customer messaging platform called Crisp Chat
- Implemented payment method using Stripe and authentication using Next-Auth
- Built and validated forms using react-hook-form
- Fetched data using axios and managed state using Redux-Toolkit with TypeScript type checking
- Utilized framer-motion for attractive animations and built sliders using Swiper.js
- Persisted data in local storage using redux-persist
- Used additional packages such as react-hot-toast and react-icons to enhance the user experience
Online Code
AminH - April 2023
- Built server-side rendered UI using Next.js
- Styling by Tailwind
- Fetched data using axios and managed state using context
- Built comment system using real api
- Used leaflet for Map
- Used jalali-moment for persian date formatting
- Built sliders using Swiper.js
- and some other packages such as react-icons, react-compare-image, react-toastify
Online
Boat Rental Prisma Next.js - January 2023
- Built server-side rendered UI using Next.js 13.4 (app router)
- styling by Tailwind
- Managed the database using MongoDB
- Used Prisma to model application data as Orm
- Used cloudinary for image uploading
- Implemented authentication using Next-Auth
- Built and validated forms using react-hook-form
- Fetched data using axios and managed state using Zustand with TypeScript type checking
- Utilized framer-motion for attractive animations and built sliders using Keen-slider
- the owner of boat is able to register a boat and cancel user’s reservation
- Reservation or cancellation of the boat by the user, and also user can add boats to favorites list
- It is not possible to reserve boats that have been booked by others
- Search for available boats and the ability to send search results to others with the help of query-string
- Viewing the location of the boat on the map with the help of world-countries and react-leaflet libraries
- Used additional packages such as react-hot-toast and react-icons and react-confetti to enhance the user experience
Code
Food Shop - November 2022
- Built UI using React.js
- Styling by module css
- Used GraphQl for content management and connect that to the app by Apollo
- Built and validated forms using formik & yup
- Built comment system using GraphQl and useMutation
- Utilized framer-motion for attractive animations and built sliders using Swiper.js
- Used Redux for state-management
- Used additional packages such as react-toastify and react-icons and leaflet to enhance the user experience
Online Code
Optic Shop Next.js - March 2023
- Built server-side rendered UI using Next.js
- Styling by Tailwind
- implemented authentication using Clerk
- Built and validated forms using react-hook-form
- Fetched data using axios and managed state using Redux-Toolkit
- Utilized framer-motion for attractive animations and built sliders using Swiper.js
- Persisted data in local storage using redux-persist
- and other packages such as react-hot-toast, react-icons, react-toastify
Online Code
Admin Panel - December 2022
- Used React.js for UI
- Styling by styled-components
- Utilized framer-motion for attractive animations
- Fetched data using axios and managed state using context
- Used GraphQl for content management and connect that to the app by Apollo
- Built and validated forms using formik & yup and charts using chart.js
- and other packages such as rc-pagination, leaflet, react-icons, react-toastify
Code
