DEV Community: Aditya Gupta

Seasons: A Creative Exploration of Transitions and Transformations

Aditya Gupta — Sat, 18 Jan 2025 20:13:06 +0000

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

Season

I developed "Season," a web application that tells the beauty of change through seasonal transitions. Created using Visual Studio Code and powered by GitHub Copilot, this is an innovative tool that combines creativity with technology in delivering a visual treat.

Demo:

Source code

AdityaGupta20871 / season

seasons

The code provided includes several libraries and features. Here's a brief document summarizing the design choices, challenges faced, and the libraries involved:

Design Choices:

Responsive Design: The code is designed to be responsive, ensuring that the website layout adapts to different screen sizes. The use of relative units like "vh" (viewport height) and responsive grid layouts helps achieve this.

Fonts: "Bebas Neue" is chosen for its bold and modern appearance, while "Arial" is used as a fallback font for compatibility.

Color Palette: The color palette includes soft background colors like "#faf4de" to evoke a warm and inviting feel associated with autumn.

Animations: GSAP (GreenSock Animation Platform) and ScrollTrigger are implemented for animations. Elements like text and images have dynamic animations to engage users.

Interactivity: A circular reveal effect is created using CSS clip-path for interactive elements like buttons. The reveal effect responds to user interaction for an engaging user…

View on GitHub

Live Demo

season

Copilot Experience

The most critical part of developing "Seasons" was how much GitHub Copilot changed everything. Its ghost text provided intelligent GSAP animation suggestions, inline chat streamlined debugging, and autocomplete helped with reusable code blocks. The model switcher and sidebar for quick documentation made exploring and optimizing ideas smooth. Although I was used to Cursor AI, Copilot's more advanced features and integration into VS Code elevated my workflow, making complex tasks efficient and creative.

Design Choices:

Fonts: "Bebas Neue" is chosen for its bold and modern appearance, while "Arial" is used as a fallback font for compatibility.

Color Palette: The color palette includes soft background colors like "#faf4de" to evoke a warm and inviting feel associated with autumn.

Animations: GSAP (GreenSock Animation Platform) and ScrollTrigger are implemented for animations. Elements like text and images have dynamic animations to engage users.

Interactivity: A circular reveal effect is created using CSS clip-path for interactive elements like buttons. The reveal effect responds to user interaction for an engaging user experience.

Libraries Involved: The libraries involved in the code include:

GSAP (GreenSock Animation Platform): Used for various animations and transitions. ScrollTrigger: A GSAP plugin for triggering animations on scroll. Lenis: A library for smooth scrolling and interaction detection. Blockade Labs Skybox -for generating 3d world

Challenges Faced:

Complex Animations: Implementing animations, like random rotation and position of images, requires fine-tuning in GSAP. Achieving a smooth, interactive circular reveal effect also posed challenges.

Conclusion:

In a nutshell, GitHub Copilot greatly reduced the complexity of tasks such as implementing GSAP animations and circular reveal effects. It provided smart suggestions through ghost text, inline chat, and the sidebar, plus debugging assistance and quick access to resources, giving me time to be more creative and less bogged down by technical problems. I had grown used to the more intuitive experience from Cursor AI but found that seamless integration and great capabilities with GitHub Copilot put me back with Visual Studio Code for an incredibly efficient and innovative development process.

Elevate Your eCommerce Experience: Discover VeloShop an Innovative Wix-Powered Platform!

Aditya Gupta — Sun, 14 Jul 2024 13:57:03 +0000

This is a submission for the Wix Studio Challenge .

What I Built

Wix Website : https://adixander07.wixstudio.io/veloshop/login

If you wish to see all functionalities of VeloShop try to see the Bottle Product having all functionalities as I did not feed ProductData for all Products for now.

Initial Wireframe : Figma Link

VeloShop

This project aims to create an innovative eCommerce experience using Wix Studio, leveraging Wix's APIs and libraries to enhance user experience. The platform includes a dynamic product page, custom cart implementation, Authentication and an AI-powered custom T-shirt generator, providing users with a seamless and interactive shopping experience.

Key Features

Registration and Login Process: The registration and login process is implemented using the Wix Members API, providing seamless user authentication and management And Protecting all pages if you are not authenticated.
Home Page: The home page is designed using the Wix Members API to display member-specific content and dynamically update media sources. It showcases testimonials with navigation and handles member authentication by redirecting non-members to the registration page.
Catalog Page: The catalog page leverages the Wix Data API to filter and sort products by category and price, binding product data to a repeater for easy browsing. It handles navigation to product detail pages and retrieves product data from collections.
Contact Page: The Contact Page was designed directly into wix Studio Connecting it to Contact Collection that is use for storing all the people who contacted the admin.
Subscribe Page: The subscribe page employs the Wix Data API , Wix CRM API and Triggered Emails to allow users to subscribe to newsletters by entering their email. It stores subscriber information in the Wix Collection and sends triggered emails to users confirming their subscription, enhancing user engagement and communication.
Dynamic Product Page: The dynamic product page, built using the Wix Stores Frontend API, displays detailed product information, including descriptions, prices, SKUs, ribbons, and media items. It allows users to add products to the cart with specified options, load and display product reviews, and handle review form submissions.
Custom T-shirt Page: The custom T-shirt page integrates the Wix Data API and Replicate API to enable users to generate custom T-shirt designs using AI models. It stores generated images in the 'AIImage' collection and displays them on the custom T-shirt page, allowing users to create and view unique designs easily.
Custom Cart: The custom cart feature, implemented using Velo by Wix, allows for a highly personalized shopping cart experience. Users can add products, view item details, update quantities, and proceed to checkout seamlessly. This custom solution ensures flexibility and enhanced user control over their shopping experience.
Chatbot: The custom Chatbot feature implemented using Yourgpt.ai and trained on wix sites to give personalized responses based on user's input.

Demo

Try It out Now : https://adixander07.wixstudio.io/veloshop/login

If you wish to see all functionalities of VeloShop try to see the Bottle Product having all functionalities as I did not feed ProductData for all Products for now.

In The video the AI Image is not generated because of this as I published my code on github the token was disabled but now i have changed token and you can use it.

Some of the files on github are empty as I did not use custom templates of wix store and members

AdityaGupta20871 / veloshop

Git Integration & Wix CLI

This repo is part of Git Integration & Wix CLI, a set of tools that allows you to write, test, and publish code for your Wix site locally on your computer.

Connect your site to GitHub, develop in your favorite IDE, test your code in real time, and publish your site from the command line.

Set up this repository in your IDE

This repo is connected to a Wix site. That site tracks this repo's default branch. Any code committed and pushed to that branch from your local IDE appears on the site.

Before getting started, make sure you have the following things installed:

Git
Node, version 14.8 or later.
npm or yarn
An SSH key added to your GitHub account.

To set up your local environment and start coding locally, do the following:

Open your terminal and navigate to where you want…

View on GitHub

Development Journey

My development journey began two days after the challenge announcement. To organize my thoughts and vision for the website, I started by creating a wireframe on Figma. This initial step helped me to clearly define what I wanted to achieve with my website. Then, I moved on to developing on Wix Studio, initially installing Wix Stores and Members to leverage their prebuilt collections.

As my journey progressed, I began using my own collections, becoming comfortable with features like the Multireference Field. For the APIs, I started with the Auth APIs and then transitioned to using Wix Data for displaying product data. This was followed by implementing the Stores API to display products and a custom cart.

I initially intended to use the eCommerce API but due to some errors and time constraints, I decided to stick with the Stores API, which allowed only the admin to add products. Then, I had the idea of creating custom T-shirts with AI-generated images. I was inspired by Ania Kubow's YouTube video on ChatGPT, but I faced the obstacle of having no credits left in my OpenAI account.

That's when I discovered Replicate, which offers free usage for a limited period. I ran the AI-forever/kadinsky model on it and created the custom T-shirt page, although much work is still pending, like the add-to-cart feature. I used Wix Secrets to store the API key for Replicate. Additionally, I set up triggered emails and a subscribe page that sends an email to users who subscribe.

Throughout this journey, I faced numerous errors, but Anthony was incredibly helpful with his expertise on Wix, and I owe him a huge shoutout for conducting this challenge and guiding a complete beginner like me in creating a wonderful Wix website. This is my third dev challenge, and here are the links to my previous projects.

🛠️ Development Milestones:

Figma wireframing
Initial setup with Wix Stores and Members
Transition to custom collections and fields
Auth API, Wix Data, and Stores API implementation
Custom cart development
AI-generated custom T-shirt page using Replicate
Triggered emails and subscribe page setup
AI Chatbot implemented using yourgpt.ai

👨‍💻 Shoutout to @anthonywix and WixWiz YT channel : Thanks for your superpowers and guidance throughout this challenge!

🚀 Previous Dev Challenges: GymBuddy Yogify

Wix Members API: Used for implementing the registration and login process.
Wix Data API: Utilized for displaying product data and managing collections.
Wix Stores API: Employed for displaying products and implementing a custom cart.
Wix Secrets: Used to securely store the API key for Replicate.
Replicate API: Used for generating AI images for the custom T-shirt page.
Wix Location API: Used for handling navigation and URL routing.
Wix CRM API: Utilized for triggered Emails.
Wix Ecommerce: Tried Transitioning from wix stores to e-commerce api.

<!-- Thanks for participating! →

Empowering Fitness with Twilio: Your Personal GymBuddy for Seamless Communication and Progress Tracking!

Aditya Gupta — Sat, 22 Jun 2024 17:11:58 +0000

This is a submission for Twilio Challenge v24.06.12

What I Built

GymBuddy

GymBuddy is a web application designed to help fitness enthusiasts track their workout performance and nutritional intake efficiently. Whether you're a beginner looking to establish a fitness routine or a seasoned athlete aiming to optimize your training, GymBuddy provides essential tools and insights to support your fitness journey.

Key Features

Performance Metrics: Track sets, reps, workout duration, and calories burned across different exercises.
Nutrition Tracking: Monitor meals consumed throughout the day to maintain a balanced diet.
Daily Quotes: Get inspired with daily motivational quotes to keep you motivated.
Interactive Charts: Visualize your progress with interactive charts showing performance trends over time.

Technologies Used

Frontend: React.js, Chakra UI
Backend: Flask
External APIs: Twilio Api for whatsapp messaging and Cohere Api for AI responses

Demo

Twilio and AI

I utilized the Cohere API to generate AI-driven content, such as daily motivational quotes and personalized workout plans based on user input. When a user fills out the form, a workout plan is dynamically generated, including meal suggestions.

For communication, I integrated the Twilio API to send messages. Upon completing their workout, users can enter details in a specific format like "10 10 50 200". Twilio then sends this data to a Flask server via its API. The Flask server interprets the message to update the dashboard with details such as 10 reps, 10 sets, 50 minutes, and 200 calories burned.

I could not have achieved this functionality without Twilio Kudos to Twilio team.

Also I had already written Blog around Twilio so I had little experience with Twilio API and Whatsapp business API.

I wanted to use Twilio Whatsapp business API but time was less as it takes verification so I sticked to using Whatsapp Sandbox.

Getting Started

To get started with GymBuddy, and follow these steps:

1.You can try it out by scanning the QR Code in the image or by texting the code join four-mental to the number +14155238886 on WhatsApp.

Once that is done clone the repository.

Source code

AdityaGupta20871 / GymBud

Watch Video Demo

Prerequisites

Before you begin, ensure you have the following installed on your development environment:

Python 3.x
Node.js
npm (Node Package Manager)

Join Twilio Sandbox

Backend Setup

Navigate to the backend directory:
```
cd twilio/backend
```

Create and activate a virtual environment:

python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`

Install the required Python packages:
```
pip install -r requirements.txt
```
Configure environment variables:
- Create a .env file in the backend directory with the following content
```
TWILIO_ACCOUNT_SID= Your SID
TWILIO_AUTH_TOKEN=Your Auth Token
COHERE_API_KEY=Your API KEY
```
Run the backend server:
```
python app.py
```
Your Flask server will start running on http://127.0.0.1:5000/.

** Running Flask with ngrok**

If you want to expose your local Flask server to the internet for testing:

choco install ngrok(in Powershell if windows)
ngrok config add-authtoken Your AuthToken
ngrok http 5000
Embed the url obtained after hosting into whatsapp Sandbox settings inside When a message comes in

…

View on GitHub

Additional Prize Categories

<!-- Does your submission qualify for any additional prize categories
Twilio Times Two: My usage of Twilio's Whatsapp Messaging API for outbound messages and the Twilio REST Client for handling incoming messages qualifies your project under the Twilio Times Two category.

Impactful Innovators: My project, GymBuddy, innovatively integrates the Cohere API and Twilio to revolutionize fitness tracking and engagement. Using Cohere, GymBuddy generates personalized motivational quotes and custom workout plans. Twilio facilitates seamless communication, enabling users to log workout details via simple text messages and receive instant updates on their progress.

<!-- Thanks for participating! →

Yogify : Your Yoga community builder app

Aditya Gupta — Sun, 26 May 2024 00:30:02 +0000

This is a submission for the Deployed Link for Yogify

What I Built

The inspiration to build Yogic Yoga came from a personal experience. My brother struggled with restlessness and hyperactivity, constantly moving around and unable to stay still. After numerous consultations with doctors, one suggested trying yoga and meditation. To our surprise, these practices made significant improvements in his health.

One morning, on my way to work, I noticed a group of elderly people practicing yoga in the park. Intrigued, I thought it would be beneficial to take my brother to join them. However, the next day, no one showed up. I realized there was a major communication gap among the elderly participants. While many use WhatsApp to communicate, organizing regular sessions was still a challenge.

As someone who enjoys yoga, I often attend group classes included in my gym membership. After discussing with my trainer, he agreed to offer free classes to these elderly people for a month, planning to charge a minimal fee afterward. Despite the willingness, there was a disconnect between the trainer and the potential participants.

This experience highlighted several real problems related to yoga that led to the development of Yogify Yoga:

Communication Gaps: Organizing and communicating about yoga sessions, especially among elderly people, can be challenging without a centralized platform.
Access to Trainers: Finding and connecting with qualified yoga trainers who are willing to offer their services, particularly at affordable rates, is often difficult.
Health Benefits: Yoga and meditation have proven health benefits, but many people are unaware or unsure how to start or where to find resources.
Community Support: There is a need for a supportive community where individuals can share their progress, encourage each other, and stay motivated.

Demo

Video Link: https://youtu.be/87QzA-l3XSo
Github Link : https://github.com/AdityaGupta20871/Yogify

Authentication Page Although Google Login not working for now

Exercise Page listing all basic yoga poses

Workshop Page listing all workshops for people who are willing to conduct workshops

Form page for user registration for workshop

Workshop Form Page for creating workshops

HomePage

Users Page listing all users

Figma Experience

Journey

Initial Setup:

I Started building Yogify on May 19 with no prior AWS experience.
Cloned the repository and explored the documentation to get started.

Challenges with Amplify Sandbox

Struggled with configuring IAM and setting up the Amplify Sandbox.
Slow laptop performance made redeployment time-consuming and frustrating.
Eventually found the Amplify documentation helpful in navigating these challenges.

Configuring Authentication

Set up authentication using the Authenticator.
Faced difficulties with implementing Google authentication due to sandbox setup issues.
Realized the importance of configuring the sandbox first and setting keys in secrets, not environment variables.
Overcame these hurdles with the help of detailed Amplify guides.

Data and Storage Services Integration

Found setting up the data service straightforward with Amplify Gen 2 documentation.
Encountered complexity in integrating the storage service.
Managed to use StorageImage and StorageManager components after considerable effort.
Look forward to exploring how to use data and storage services together more effectively.

Serverless Functions and Customizations

Successfully added a custom message for sending confirmation links during authentication.
This addition enhanced the user experience with a personalized touch.
Using Amplify's Figma Plugin

Utilized the Figma plugin to generate code and create reusable components.

Appreciated the ease of editing and adding code using the Amplify UI builder plugin, though refinement was still necessary.
Had a positive experience with the AWS Amplify UI Builder.
Overall Experience and Future Prospects

Despite the hurdles, found the comprehensive Amplify documentation crucial for progress.

Gained substantial knowledge about AWS Amplify Gen 2.
Proud of the robust foundation built for Yogify.
Excited to continue developing and refining the app.

Connected Components and/or Feature Full

Yes, I used various components from AWS Amplify, including StorageImage, StorageManager, Authenticator ,ThemeProvider, Flex, TextField, Button, PhoneNumberField, TextField, Table, TableHead, TableRow, TableCell, TableBody ,Geo among others. My project incorporates all four core features: data, authentication, serverless functions, and file storage, according to the Gen 2 React documentation.

Future
I would like to add a blog section and AI assistant and i also saw in app messaging feature using aws which also excited me although in this short deadline I could not add it I would love to add them in future along with dedicated community forum for yoga lovers.