WEBIT

A Coloring Book For Developers

LIVE DEMO

This application was built as part of a Hackathon. The requirements were to build an app that lets people express their creativity in a visual format. You can build ANY application you'd like. Whether it's a blank canvas that you can paint on, a photo-editing app, a shared white board -- or anything else that allows a user to pick a color and apply that color.

The engineers behind Webit decided this was a perfect opportunity to not only build an app that allows people to express their creativity but also an app that can be useful in your day to day life. Since this was a Hackathon for developers, the goal was to build something that can help developers. With this goal in mind, the team came up with the idea to create a website design application that functions as a coloring book.

Features

• User can create an account and login with an email, username, password, and an avatar
• Users can navigate to the design section and express their creativity with coloring a website template.
• Users can copy the HTML and CSS code from their created templates.
• Users can name and save their created templates that can be later on accessed on their individual profile page.
• Users can view and copy the code of templates created by other users.

Tech

Languages/Frameworks

• [HTML] -The standard markup language for documents designed to be displayed in a web browser.
• [CSS] - A style sheet language used for presentation of a wesbite.
• [JAVSCRIPT] - Prototype based object oriented language.
• [ReactModal] - Accessible modal dialog component for React.
• [REACT] - A javascript library for building user interfaces.
• [FLEXBOX] - A layout model that allows elements to align and distribute space within a container.
• [Node.js] - A backend Javascript runtime environment that runs on the v8 engine.
• [MongoDB] - A document-oriented database program.
• [Mongoose]- An Object Data Modeling(ODM) libary for MongoDB and Node.js.

Lottie Files/Images

• Web Designer Animation - By S M Rony. (Lottie on landing page)

• User Profile - By Irfan Munawar (Lottie on Sign Up and Login page.)

PSEUDOCODE

Home-Page

Upon loading the page, the user will be presented with the landing page, which features some of the contents below:

The user can use the navigation bar to access the individual sections of the website. The Landing page consists of a "How It Works" section that instructs the user on how to use the application. There is a "Meet The Team" section that introduces the users to the engineers behind webit. There is an "About The Site section that tells the user a little about how the website came to be.

The Design Page

The design page is the main page of the application where a user can create and edit their website by coloring the pre-made template. The premade template is located on the left side and the controls on the right.

There is a "click to edit Text color at the bottom of the color picker:

                      Click To Edit Text Color

Upon clicking the "click to edit text color", the text will switch to "click to edit the background colors". This allows the user to choose what they want to color on the website, whether it is background or simply the texts.

The user has the option to "reset" a template to the base template, name and save their templates to their profile as well as copy the code with the "view code" button.

Study section

There is a profiles section that shows all the users that created an account on the platform. The page contains each user's name, avatar, and the number of templates they have.

On Click of a user:

If a user is clicked on, their individual profile section will be loaded which features their name, avatar, number of templates, as well as a color scheme of the templates they have created. 

On Click of a template:

 On click of a template, the user will be redirected to the deisgn page with the template they have clicked on as the default pre-made template. The user has the options of performing all actions available to a base template on another user's created template. 

Current User Profile

 There is a current user profile that has the data of the current logged in user available. On this page, a user can see all their created templates as well as their account details.

WIREFRAME

SPECIAL THANKS

• A special thanks to the mintbean team for hosting this hiring hackathon for Jr Web Devs. This Hackathon has given Jr developers an opportunity to not only practice their skills but to network with other companies as well as other developers.

APP SCREENSHOTS

FUTURE UPDATES

• Create different website templates for user tp choose from.
• Make your own template(Create your template in HTML and CSS and let the site do the rest with making that template an option for other users to use)