I'm an engineer with a bachelor degree in computer engineering, I worked as a full-time front-end engineer with many companies (Remotely and based on location) dealing with many websites using WordPress CMS, I have a lot of experience using many websites builder like WP-bakery Elemntor, Avada Theme builder and many custom themes builder, convert tons of designs in PSD, Adobe XD And Figma to Real websites using HTML CSS Bootstrap And SCSS with organized code and Pixel perfect Conversion, Also I have been clone many websites too using CSS HTML Bootstrap and jQuery. Developed a dashboard using jQuery, Develop a web app using React.js, maintained and enhancement in Vue.js project and Angular .
Gifo An application used to get data from Giphy API, it's got an infinity list of trending gifs and random gifs with awesome infinite scroll feature to generate more gifs, User could add to Favourite and browse favorite gifs, Upload his own gifs and browse it too & Search for gifs using Giphy API eearch engine .
Clone down this repository. You will need node and npm installed globally on your machine.
Installation:
npm install
To Start Server:
npm start
To Visit App:
localhost:3000/
This was a 7 days long project built for a task purpose. Project goals included using technologies learned up and worked with it in real projects until this point and familiarizing myself with documentation for new features.
I started this process by using the create-react-app boilerplate, then adding react-router-dom, react-slick, bootstrap, axios, node-sass,react-lazy-load-image-component and react-spinners.
One of the main challenges I ran into was Infinite Scroll and Favorite. This leads me to spend a few hours on a research spike into the best Lightweight node packages to implement that feature and finally, I decided to implement it manually using core javascript features.
At the end of the day, the technologies implemented in this project are React, React-Router 6, Axios, and a significant amount of VanillaJS, JSX, and sass. I chose to use the create-react-app boilerplate to minimize initial setup and invest more time in diving into weird technological rabbit holes. In the next iteration, I plan on hand-rolling a project using the Vue.js framework to continue in my learning journey.