COVID-19

PROJECT: Covid-19 demo site
A single-page web app for news and articles about Covid-19. 
It is designed for a small screen view size

PROJECT PURPOSES:
– Use and understand React design patterns
– Use private and public routing system 
– Make image slider 
– Create widgets and templates
– User sign in and out with firebase authentication
– User dashboard for creating posts
– Using a firebase database for storing posts
– Linking videos and video player system
– And many more features

TECH STACK:
– Build with: React Js, Javascript, HTML, CSS, Firebase Database
– Deployment: Firebase
– Other tools: Git, Github

STATUS:
Finalized

LINKS:
Github
Live Demo

Zombie Apocalypse

PROJECT: Zombie Apocalypse in the time of Corona 
It’s a text-based game. I’ve started this project during the lockdown.

PROJECT DEVELOPMENT PROCESS:
After graduating from Makers Academy coding bootcamp, I’ve decided to improve my javascript skills by taking advantage of #April free offer from Pluralsight. So I made the Zombie Apocalypse version 1.0 of the game, which only works with prompts and alerts.

To test my knowledge more I decided to improve the game by adding some visual and printing it on the screen. when I managed to do that I was motivated to add more visual so I used my design skills and made near 40 digital illustrations. I synced them with the story and deployed the Zombie Apocalypse version 2.0.

At the moment I am working on version 3.0 of the game which is focused more on code quality, responsiveness and editing some of its features and many more issues. 

TECH STACK:
– Build with: Javascript, HTML, CSS
– Illustrations:  Adobe photoshop
– Deployment: Netlify
– Other tools: Git, Github


STATUS:
Ongoing project

LINKS:
Github
V1.0
V2.0

mnemonic​

PROJECT: mnemonic 
Team engineering final project for Makers Academy. 
A single-page web app game, based on the classic memory/ matching cards game. 

PROJECT DEVELOPMENT PROCESS:
Final project in lockdown was a great challenge for all of us as a team. Not being on the site and working closely together wasn’t easy but we managed to cut the distance between us by using the remote tools such as Zoom, Miro board, Slack and self-discipline.  Not only we learned about agile and teamwork but also we are now ready to work fully remote.

TECH STACK:
– Build with
React.js, Javascript
– Tested with
Jest & Enzyme
– Continuous deployment: Travis CI, Coveralls, Heroku
– Remote team collaboration: Slack, Zoom, Miro whiteboard
– Illustration: I designed the cards with adobe photoshop

STATUS:
Finalized

LINKS:
Github
Live demo

Javascript Collection

Movie lister

Single page app for listing movies

Github User

Search and find github users with some info about them

Loan calculator

Great app to sort your finance towards paying your depth

Gussing game

Let's hang Adam

The old school guessing game

Weather

Show the weather on a specific location

PROJECTJavascript Collection
Series of a single-page app 

PROJECT DEVELOPMENT PROCESS:
I learn javascript on daily bases. This programming language and its abilities always inspire me to explore it more. I look at different resources all the time and try to make mini-projects with different learning objectives. These series helped me to become a better developer everyday.

TECH STACK:
– Build with: 
Javascript,
CSS, HTML
– Deployment: Netlify
– Other tools: Git, Github
– Graphics: I designed the images with adobe photoshop

STATUS:
Ongoing projects

LINKS:

For Live demo click on the thumbnail above.

Codes are available on the links below

Github for Movie lister Github for Github userGithub for Loan calculatorGithub for Let’s hang adamGithub for Weather app

CSS, Sass, HTML Collection

PROJECT: Babylon garden design
A playful project for understanding the power of Sass, CSS. 

PROJECT DEVELOPMENT PROCESS:
A Sass project, based on a grid layout module system on CSS 3. In this project, I’ve tried to explore the grid of CSS by following tutorials, W3 and other resources. 
Fully responsive.

TECH STACK:
– Build with: 
CSS3,  Sass, HTML5, Nodejs
– Deployment: Netlify
– Other tools: Git, Github

STATUS:
Finalized 

LINK to Babylon:
Github
Live demo

PROJECT: Fitness Freak

PROJECT DEVELOPMENT PROCESS:
A Sass project. In this project, the layout was designed with Flexbox system.
Fully responsive

TECH STACK:
– Build with: 
CSS3,  Sass, HTML5, Nodejs
– Deployment: Netlify
– Other tools: Git, Github

STATUS:
Finalized 

LINK to Fitness Freak:
Github
Live demo

PROJECT: BUF

PROJECT DEVELOPMENT PROCESS:
A Sass project based on BEM structure concept includes CSS3 animations and effects.

TECH STACK:
– Build with: 
CSS3,  Sass, HTML5, Nodejs
– Deployment: Netlify
– Other tools: Git, Github

STATUS:
Finalized 

LINK to Fitness Freak:
Github
Live demo

©Bdesignstuio.co.uk 2018