A small scale yet fully-functional clone of the official Instagram web application. This app has all the basic features such as user-login, account-setting, post, comment, like, bookmark and user-search. Special emphasis on replicating the UI/UX of original app.

Things learnt: OAuth API authentication, Gravatar, Image uploading, Cloud storage, Ajax, Bootstrap and SASS

before_action :authenticate_developer!

Landing page of a fictional company providing tours in the beauty of nature. Watch the design change and adapt to various screen sizes. The power of CSS will leave you in awe. NO frameworks, NO Javascript, NO libraries, pure magical CSS.

Things explored: Development and production workflow, 7-1 Architecture Pattern, BEM, mixins, responsive images, animations, browser and device support

check out the code?

Who doesn't like speeding in the traffic! I made this pretty cool game where the user controls the car's speed and direction with arrow keys en route dodging other cars in the traffic. I followed Very Easy Tuts channel on YouTube for this project.

Things explored: Styling HTML divs with CSS, Javascript animation frame, Collision, Slide down function

Check out the code?

I’m sure you all have played the classic Snake game on your Nokia 6110 phones. I also worked on a similar project that stemmed from the snake gameplay! It's easy to play, hard to master. Did you know, Snake==Array?

Things explored: HTML5 Canvas, Gameover conditions, Loading images/audio

check out the code?

Landing page of a fictional company selling luxurious homes. Watch the design change and adapt to various screen sizes. Grids make it a lot easier to code responsive designs! NO frameworks, NO Javascript, NO libraries, pure magical CSS.

Things explored: CSS grid, development and production workflow, BEM, responsive layout, typography, design patterns

check out the code?

Objective of the game is to go through pipes without touching them while fighting against the gravity that is pulling you down constantly. The game gets infinitely harder as it gets faster. The longer you survive, the more points you earn! I followed Very Easy Tuts channel on YouTube for this project.

Things explored: Functions (for code reusability), Game loop patterns, Event listeners, Collision

Check out the code?

A cricket betting app where users can match with random opponents for a one-on-one clash during the CWC'19. I worked on the frontend part of this project designing and coding the User-Dashboard, Landing Page and Login Forms. This project was started, in a team, with great zeal but remains incomplete.

Signed-in user dashboard page for a fictional company offering booking services for hotels, cars, flights, tours. Watch the design change and adapt to various screen sizes. The power of CSS will leave you in awe. NO frameworks, NO Javascript, NO libraries, pure magical CSS.

Things explored: CSS flexbox, Development and production workflow, BEM, mixins, cool animations, browser and device support

check out the code?

Realtime Group Chat With ActionCable. The power of rails 5's action cable was leveraged to make a group chatroom app, where users can join/make a chatroom and send/receive messages in real time.

Things learnt: ActionCable, CoffeeScript, Materialize.css

before_action :authenticate_developer!

Another classic game from the 90's when we weren't introduced to mobile gaming and desktop was the hot craze. The objective of this fairly simple yet addictive game is to catch the eggs falling from the sky(I meant the hen, lol). I followed Very Easy Tuts channel on YouTube for this project.

Things explored: Using images inside moving divs, Collision, Slide down function

Check out the code?

Watch how much have you saved for the current month, what percentages are your expenses of the total income. A sweet and pretty UI/UX experience with JavaScript. The data isn't stored on any database so you hit refresh and it's gone. Organised, readable, scalable and concise code.

Things explored: Module Pattern, IIFE, Prototype chain, making our own data structure, API fundamentals, creating HTML strings

Check out the code?

How interesting learning becomes when you've such an addictive game to look forward to!
Read the rules carefully, it's Probability vs Luck :)
I learned how JavaScript manipulates the DOM elements, cool CSS fade-out animation, HTML form validation, UI/UX basics, game-play/over conditions

Check out the code?

A discussion forum with appropriate channels where authors can manage their own discussion by editing or deleting it at any time once logged in. Any discussion can have many replies which is what makes forums so great for a community based application.

Things explored: Markdown support and syntax highlighting for code snippets, Admin user roles, Prettier URLS, Ajax replies

before_action :authenticate_developer!

The default forms provided by Rails framework were too boring for me to work with. I completely redesigned and coded them from scratch using Bootstrap components for the layout. I also added a Flippable-Card effect to these to show you guys the before and after of these forms, feel free to use them in your personal projects!

Check out the code?

A simple and sleek design for your company's coming soon message.
What's special? Open the design and try rotating your mobile device!

Things explored: Redirecting one webpage to another on depending on the type of device (mobile/desktop).

Check out the code?

In this challenge, I attempt to code the classic game Minesweeper in JavaScript with the p5.js library. I followed The Coding Train challenge#71 on YouTube for this game (that guy's the so damn cool!).

Things learnt: OOP (Javascript), Code refactoring, Canvas (p5.js), Functions (to reuse the code)

Check out the code?

Used pure CSS3 to make a rotatable 3-dimensional cube. CSS's transform rotate (for 3D effect), transition (for rotation smoothness) and perspective properties were used to make this mini project. The faces of the cube show up some memes I made when I had to study for semester exams, lol.

Check out the code?

I wanted to make my resume/CV but was having a hard time learning Photoshop as a complete alien to it's tools and terminologies. After hours of scratching head, I took the road less travelled by for designign a resume- HTML+CSS! It was extremely challenging yet fun to make a Timeline, Overlapping boxes and positioning so many divs.

Check out the code?

A web app which acts as a showcase for all the books a user(signed-in) has added with links to buy/edit/delete it.

Things learnt: CRUD, Categories Model, Image Uploading (using paperclip), Ajax, Bootstrap

before_action :authenticate_developer!

The iconic 2-player pong with a nice song in the background while you try to beat your opponent. Pong is a fairly trivial game, but still requires a little infrastructure to do right.

This is a slightly over-engineered version, but still there is more that could have been added:
→ Touch events - for mobile browsers we need a different design for our user input, perhaps we could support touch events for the paddle movements.
→ CSS @media queries - we should probably scale the pong game canvas based on the users screen real estate.

Check out the code?

An app where users can upload their items to be traded and interact accordingly. Think of the messaging structure like an ongoing conversation. Users can initially create a conversation and always look back to their history. I was introduced to new methods including scopes, params, and more that come bundled with Rails. I have been following Web Crunch YouTube channel for backend heavy rails project. I used his own Rails application template called Kick Off. Yeah, a big thanks to these guys who are helping us beginners learn!

before_action :authenticate_developer!

A mobile-friendly beautiful portfolio, for a zumba instructor, that masters the art of visual presentation. An amalgamation of my love for this crazy dance form and the magic that Bootstrap sprinkles!
© Design inspiration: wix.com

Things learnt: Responsive and trendy design, Invered pyramid technique, Formspree

Note: The images used are not meant to be used anywhere as these have been put in this project only, with the owner's permission.

Check out the code?

I tried my hand at making a fully-functional e-commerce website using rails with all the features one can think of in a shopping site! Let it be products available, search( and nested seach), currency options, buy, return, admin-side, user-side, cart, payments(paypal gateway) and so much more. I obviously didn't implement any of them from scratch. Why? Because re-inventing the wheel makes no sense, that too an imperfect one. I used the super awesome Spree framework instead. Spree Commerce is an open-source e-commerce solution based on Ruby on Rails

before_action :authenticate_developer!

I struggled for hours scrolling through tutorials, watching videos, and banging my head on the desk trying to build an unbeatable Tic Tac Toe game with a reliable Artificial Intelligence. But looking at the finished project, it seems the hustle was worth every second. It's so much using the power of Recursion in making the move look like AI!

Source:  

Check out the code?

A pure application of the popular rails gem- sentimental_tweets.
It fetches selected (according to our conditions) tweets from the official Twitter app, analyses their score to determine if it's a positive tweet or a negative one.
Infinitely many words are used as a data-set, given by the gem but we can add our own words to that list!

This was one of the first projects I tried using Javascript (completely coded in vanilla js). I explored what Event Listeners meant and did as well as how arithmetic operations work crazily in javascript. Writing HTML text from the .js file was also a discovery for me back then. This mini project motivated me to explore this beautiful language even more.

Check out the code?

A square div flying across the window, changing colors randomly on hover, flies in random direction when the mouses is over it! Your goal is to stop the box from going out of the window. Fun, easy, minimal!

This was my first project (and it looks so) exploring Javascript mouseover() event along with hover property given by CSS.

Check out the code?

Another tutorial by Web Crunch which explores the power of Vue.js combined with rails. The goal of the app is to be a home for any amount of projects(think Basecamp but much more stripped down). A project lives within a team and can have as many users as necessary. A user can only belong to one team at a time (this is a small side-effect of the Devise gem. Ultimately, we'd want to extend this to allow a single user to belong to multiple teams.)

before_action :authenticate_developer!

A stripped down version of Rotten Tomatoes web app, built with powerful rails. Used inbuilt scaffolding to create models and basic setup because I wanted to explore 2 particular gems, one for star-rating feature and other for search. The UI/UX is average as I didn't spend much time over designing. Anyway, design is responsive.

Things learnt: Raty.js, Searchkik gem and its installation(a big deal imo), Devise setup

before_action :authenticate_developer!

A fun game to flex your brain muscles and match 2 cards with same image.

Behind the hood: an openedCards array to store current cards and compare if these are matched (will always have a length of 2). A matchedCards array to check if all cards have been opened (for gamover conditions).

Check out the code?

A responsive and pretty image gallery which store all the images a validated user uploads, gives them a very nice animation effect as well.

Things learnt: CSS animations, Overlapping two divs and showing other on hover with varying opacity!

before_action :authenticate_developer!

Beginnings are always the hardest part but turn into sweet memories when you look back. This was the first time I explored the world of web design and development, trying badly to copy a ready-made template. The result no where looks even near to perfect but taught me to appreciate finer details of web page designing which most people overlook.

This project has been included with no intentions of portraying any sort of skills! Is the old school "Hello World" of HTML+CSS

Check out the code?

Coding guidelines:
- you are free to choose any UI framework of your liking
- use SCSS/LESS or any CSS pre or post processor
- each section should take entire screen of users viewport
- header should always be in static position
- clicking on the navigation should auto scroll the page to appropriate section
- output should be responsive

Check out the code?

This was one of the first projects I tried using Javascript (completely coded in vanilla js). I explored what Event Listeners meant and did as well as how arithmetic operations work crazily in javascript. Writing HTML text from the .js file was also a discovery for me back then. This mini project motivated me to explore this beautiful language even more.

Check out the code?