I am so happy to have graduated from the CodeYourFuture Software Development course last month. It has been an absolutely amazing journey discovering so many amazing technologies like HTML, CSS, JavaScript, React.js, Node.js and PostgreSQL. The CodeYourFuture community has been a very supportive, warm and welcoming place to learn not only tech skills but also advance my soft skills. I've really enjoyed working through each module month after month as well as helping many fellow trainees in their coding journey.

The final project has been a whirlwind of struggle, confusion, stress but at the same time it was really fun working with Milad E-Pour, Bahar Bazargan and Cuneyt Turker to develop a full stack project for an international client. Seeing this project come to fruition has been an amazing achievement: https://lnkd.in/e_f-zeV4

CodeYourFuture is doing a brilliant job helping so many people with disadvantaged backgrounds get good jobs in tech and it has been a privilege working with their helpful volunteers such as Altom Hussain, Musa Yuksel, Saleh Pirouzi, Ian Taite, Vlad Ene, Natalia Shilyaeva.

#codeyourfuture #coding #javascript #css #html #react #softwaredevelopment #tech

1682100907018.jpeg

1682100913970.jpeg

1682427690142.jpeg

IMG_1240.jpg

Graduation

I am absolutely thrilled to have finally deployed projects on both AWS and GCP 😁😁😁.

This has been a very difficult journey where I have gotten stuck so many times. Deploying on these platforms is so much more difficult than platforms such as Render, Heroku, Railway etc. But the feeling of finally seeing my projects running on both platforms has been absolutely amazing! 😄.

The first project is my 'Simple CRM'. This was a project that I had built around half way through the CodeYourFuture software development course where I was trying to impress Karen Fornos Klein, PMP to get into CodeYourFuture Products 😅. I had built it using HTML, CSS, JavaScript, React.js, Node.js and MongoDB. I have deployed the Node.js server of this project on AWS using several different technologies all working together: AWS Elastic Beanstalk, AWS EC2, AWS Load Balancer, AWS S3, AWS CloudFront and GitHub Actions. I deployed the database on MongoDB Atlas and the front end on Netlify. I also improved the project before deploying by making it 100% responsive, adding authentication using JWT so users can register and login and animations using Framer Motion.

GitHub link: https://lnkd.in/e_4nDnG8
Deployed front end: simple-crm-dev.netlify.app

The second project is my YouTube Video Manager which I built in the SQL module of the CodeYourFuture software development course. I had built it using HTML, CSS, JavaScript, React, Node.js and PostgreSQL. Before deploying I improved the project by making it 100% responsive, adding authentication using JWT so users can register and login and animations using Framer Motion. I have deployed the Node.js server on GCP using GCP App Engine, GCP Cloud Build, GCP Cloud Storage, GCP App Engine Admin API and GitHub Actions. I deployed the database to AWS RDS.

GitHub link: https://lnkd.in/ezS27xFe
Deployed front end: https://lnkd.in/enJPfe4E

All these projects can be found along with my other projects on my portfolio & blog website: https://lnkd.in/euV66VpE

aws-gcp.jpg

AWS & GCP

I am so happy to have developed and deployed my very first React Native project for my portfolio! 😃😁😄. A full stack website with an Android mobile tablet app! 😄😀😊.

This is my 2nd fresh portfolio project after graduating from CodeYourFuture in April of this year.

The concept is that it's a point of sale application which store owners can use to make it easier to sell products to their customers in-store.

Tech stack, features, deployed links among other things can be found on the GitHub repo page: https://lnkd.in/eeAzUvmH and the portfolio website project page: https://lnkd.in/e6XYwM6Z

react-native_large.webp

React Native

I am so excited to launch my portfolio/blog website! 😃.
I've been working so hard on this side project throughout this month and after getting stuck many times due to using some new tech for the first time, it is FINALLY all working. Yay! 😄.

GitHub repo: https://lnkd.in/eeD7qNAc
Deployed website: https://lnkd.in/e7Ehxe9u

It's a website to showcase my projects and also a place for my blog to live. I made it using some of the tech I learned at the Software Development course of CodeYourFuture such as HTML, CSS, Bootstrap, JavaScript, React, Netlify and also some new very exciting tech such as Next.js, Strapi, Cloudinary and Railway. I built the front end using Next.js and for my portfolio items and blog posts data I setup a headless Node.js CMS that is Strapi and connected it to a PostgreSQL database. For images and videos I connected Strapi to a Cloudinary account. I deployed the front end to Netlify and the Strapi instance to Railway.

It has been so much fun using this new tech and I am absolutely blown away by how they make some things so much better! 😁.
With Next.js I was able to implement data fetching SSG, font optimization using next/font and image optimization using next/image. These are all used to increase the performance of the application and they have blown my mind! With data fetching SSG all my portfolio items and blog posts which are fetched from Strapi are all fetched at built time so when the user accesses the website, all the data is already there in the first response that the browser receives from the server. With next/font, all Google Fonts used are hosted on the Next.js server and the application does not have to fetch them from the Google servers for every user. With next/image this website is using three parts of it. First, the quality of all images are reduced by 25% which lowers the image file size, increasing performance while not lowering the quality too much for it to look bad. Second, all images except the first three (I can control this) in a collection of images are lazy loaded, improving performance even more. Third, only relevant image sizes are loaded from Cloudinary. So let's say I have a 1080p image being fetched from Cloudinary and it's being shown in a 3 column grid. By using next/image and some configuration, Next.js will fetch an image around 500p size, increasing performance even more! Amazing! 😁. These React frameworks are so brilliant.

Then we have Strapi. A pre-made Node.js/React.js Admin panel which gets setup within minutes by just running an npm command and it can be used to manage data very easily with a very nice interface. Cloudinary gives us a very generous free tier to upload and host lots and lots of images and videos for our applications. Using Strapi with Cloudinary makes data management a breeze. And I believe Railway is the new Heroku!

#javascript #css #frontend #softwaredevelopment #react #nextjs #strapi #tech

Screenshot 2023-05-26 005321.png

portfolio website screenshot.png

Portfolio Website

Effortlessly scrape, store and manage YouTube video data for your personal or project needs.

#### Problem
A YouTube video management business faces the recurring challenge of efficiently cataloging and organizing an extensive library of videos for its clients. Manually collecting and updating video information such as titles, descriptions, view counts, and upload dates can be a time-consuming and error-prone task.

#### Solution
This application utilizes web scraping techniques to extract and save essential YouTube video data. By using this application, the business can ensure accurate and up-to-date information for their clients, streamline their video management workflows, and ultimately provide a more seamless and efficient service.

#### Features
- Register and login.
- Add YouTube videos to a database with various details by web scraping the YouTube servers.
- View list of videos.
- Increase and decrease ratings.
- Delete videos.

#### Utilization
- Fully responsive.
- Authentication with JWT.
- Animations using Framer Motion.
- Node.js server deployed to GCP using GCP App Engine, GCP Cloud Build, GCP Cloud Storage, GCP App Engine Admin API and GitHub Actions.
- PostgreSQL database deployed to AWS using AWS RDS.

#### Automated Tests
- Unit tests with Jest.
- Integration tests with Jest & SuperTest.
- End-to-End tests with Cypress.

YSVM - preview.gif

GitHub

Deployed Application

YouTube Scraper

YSVM demo.mp4

This full-stack application empowers admins to efficiently track member event attendance.

#### Problem
Managing attendance records for events can be an arduous task, prone to errors and inefficiencies. Admins often grapple with manual record-keeping, leading to inaccuracies, misplaced data, and time-consuming processes. The lack of a streamlined system can result in missed opportunities, improper resource allocation, and frustrated members.

#### Solution
This application addresses these challenges head-on by providing a comprehensive solution for admins to effortlessly manage and monitor member attendance at events, eliminating the headaches associated with traditional methods.

#### Features
- Secure login.
- Manage members. View, create, update, delete and search.
- On member creation, a member ID and a QR code is generated and sent to the member by email.
- Manage events. View, create, update, delete and search.
- When it's event time, members can show the QR code on their mobile devices. Admins can use the website on their mobile devices to check-in members to events by using the phone camera to scan the QR codes.

#### Utilization
- Fully responsive.
- Authentication with Auth0.
- Data validation with React Hook Form and Yup.
- Data overwrite protection using optimistic locking in PostgreSQL.
- Application deployed to AWS using AWS Elastic Beanstalk, AWS EC2, AWS Load Balancer, AWS S3, AWS CloudFront and GitHub Actions.
- Database deployed to AWS RDS.

#### Automated Tests
- End-to-End tests with Cypress.

Event Manager - preview.gif

GitHub Repo

Event Manager

Event Manager.mp4

A website to showcase my projects and blog posts.

#### Features
- Strapi admin with Cloudinary and PostgreSQL integration for managing portfolio and blog data.
- Front End built with Next.js
- Portfolio page with data fetched from Strapi.
- Blog page with data fetched from Strapi.

#### Utilization
- Fully responsive.
- Project preview GIFs and videos.
- Next.js data fetching SSG for portfolio and blog data where all data is fetched at built time to increase performance.
- Next.js font optimization with next/font where all Google Fonts are hosted on Next.js server to increase performance.
- Next.js image optimization with next/image where quality of images is automatically reduced, lazy loading is used and different sizes of the images are loaded to increase performance.

preview.gif

Streamline access to vital legal advice for ex-prisoners through NGO data management.

#### Team Project
- Agile/SCRUM.
- Four team members.
- Four weeks development time.

#### Problem
Ex-prisoners often struggle to access the crucial legal information they need for post-release cases, creating a significant challenge in their efforts to reintegrate into society successfully. This lack of readily available, comprehensible resources hinders their ability to navigate the complex legal landscape and make informed decisions, perpetuating a cycle of uncertainty and re-offending.

#### Solution
Admins can effortlessly compile a comprehensive list of NGOs offering legal advice, streamlining the process of accessing essential resources. For ex-prisoners, the app provides easy access to this curated list, ensuring they can quickly connect with organizations that can provide them with the legal guidance they need for a successful reintegration into society.

#### Features
- Admins
 - Secure login.
 - View, create, update and delete NGOs.
 - View users who filled out form in the end user side.
- Users
 - Switch between English and Hindi languages.
 - Fill out user details form.
 - After filling out form, select type of legal advice and location region.
 - View list of related NGOs.
 - Receive list of NGOs by email, SMS and WhatsApp.

#### Utilization
- Full responsive.
- Admin panel fully secured with Auth0.
- Email integration with SendGrid.
- SMS and WhatsApp integrations with Twilio.
- Localization with full English and Hindi support.
- Complete form validation using React Hook Form and Yup.
- User details form protected with Google ReCaptcha.

#### Automated Tests
- End-to-End tests with Cypress.

Kunji - preview.gif

Deployed Portfolio Application

Kunji

demo.mp4

Experience effortless customer management and dynamic Google Maps visualization in a user-friendly application.

#### Problem
Without a CRM, valuable customer data might be scattered across spreadsheets and email threads, leading to missed opportunities and inefficient communication. As a company expands, keeping track of customer interactions and history becomes increasingly complex.

#### Solution
With this application, businesses can effortlessly create customer profiles, visualize them on a map for strategic insights, and seamlessly modify customer details and their interaction history. This streamlined approach enhances data management and empowers businesses to foster more meaningful and profitable customer relationships.

#### Features
- Register and login users.
- Create customers for each user.
- View customers on map.
- View and edit customer information.
- View and edit customer history (business correspondence).

#### Utilization
- Fully responsive.
- Authentication with JWT.
- Animations using Framer Motion.
- Node.js server deployed to AWS using AWS Elastic Beanstalk, AWS EC2, AWS Load Balancer, AWS S3, AWS CloudFront and GitHub Actions.
- MongoDB database deployed to MongoDB Atlas.

#### Automated Tests
- Unit tests with Jest.
- Integration tests with Jest and SuperTest.
- End-to-End tests with Cypress.

Google Maps CRM

google maps crm demo.mp4

Experience seamless point of sale management with a versatile website and mobile app. Effortlessly handle products, orders, and payments.

#### Problem
Traditional cash registers and manual tracking systems can be error-prone, time-consuming, and lack the capabilities to manage inventory effectively. This leads to challenges in tracking sales, managing stock levels, and ensuring a seamless customer checkout experience.

#### Solution
This application offers a solution to streamline these processes, enabling businesses to handle transactions swiftly, maintain precise inventory records, and enhance overall operational efficiency.

#### Features
- Register and login in admin panel.
- Create, view, update and delete products in admin panel.
- Login in mobile tablet app.
- Add and remove products from cart using product ID in mobile tablet app with automatic quantity calculation.
- Pay for order in mobile tablet app using debit card with Stripe.
- View orders in admin panel including order items.

#### Utilization
- Admin panel fully responsive.
- Data fetching SSR in Next.js for products and orders in admin panel.
- Authentication with JWT.
- Stripe payments.
- Mobile tablet app for Android.

#### Automated Tests
- Admin Panel
    - Unit tests with Jest.
    - Integration tests with Jest and SuperTest.
    - End-to-End tests with Cypress.

#### How To Test Mobile Tablet App
**ANDROID ONLY**
- Make sure you have registered an account in admin panel and added at least one product.
- Visit Mobile Tablet App link.
- Click 'Install'.
- Scan QR code with your **android** tablet (will open link in tablet browser).
- Click 'Install' in tablet browser.
- Download APK file and install.
- Launch installed app.
- Login with account you registered with in admin panel.

ABOUT ME

SKILLS

PORTFOLIO

BLOG