Anand Engineering College

Submmited To: Submmited By:

Mr. Rahul Sharma Umang Mittal
 Table of Contents
S.No. Content
01. Introduction
02. Overview
03. Technologies Used
04. Angular
05. Firebase
06. HTML & CSS
07. Database
08. User Authentication
09. Hosting
10. Structure
11. HTML page Rendering
12. Data Flow Diagram
13. Post Script
 Introduction
Blogging has become such a mania that a new blog is being created every
second of every minute of every hour of every day. A blog is your best bet for a
voice among the online crowd. Blogs were usually the work of a single individual
occasionally of a small group, and often covered a single subject.

Blog contain the Information of various things related to Technology, Education,

News, International, Business, Sports, Entertainment and ongoing college
activities. The main aim of this project is to connect people of same views and
same thoughts.

SCRIBE is a thought sharing platform where you can share your thoughts and
craziest ideas with the world. You can also interacts with other users by
commenting on their posts.
Special Thanks
 Overview
The Scribe is a very user friendly platform and it’s interface implemented in HTML, CSS
and JS to communicate with the user, so user don’t have to see ugly codes and stuff.
All a user can see is a beautiful and user-friendly website. On the other hand, Angular
handles all the back-end of this site like a pro. With the use of Firebase as a database,
the project has become even more autonomous.

HTML , CSS,JS, Angular and Firebase, all comes together to make Scribe.

SignUp for free and your profile is up and running in no time. And start sharing your
Ideas and thoughts with the World.

So, What are you waiting for….. Visit: https://scribe-d47db.firebaseapp.com

 Technologies Used
Front-End
 HTML
 CSS
 JavaScript

Back-End
 Angular
 Firebse Hosting
 Firebase Database
 What is Angular ?

Angular JS is probably one of the most popular modern day web frameworks available
today. This framework is used for developing mostly Single Page applications. This
framework has been developed by a group of developers from Google itself.

Because of the sheer support of Google and ideas from a wide community forum, the
framework is always kept up to date. Also, it always incorporates the latest
development trends in the market.

Specifically, an interesting concept of data binding was introduced that meant

automatic updates of the view whenever the model (data) changed, and vice versa.
On top of that, the idea of directives was presented, which allowed inventing your
own HTML tags, brought to life by JavaScript. For example, you may write:

<calendar></calendar>
 Why Angular ?
So, why Angular? Well, because it’s supported on various platforms (web, mobile,
desktop native), it’s powerful, modern, has a nice ecosystem, and it’s just cool.

Not convinced? Let me be a bit more eloquent then:

Routing . Angular can take care of routing which means moving from one view to
another. This is the key fundamental of single page applications; wherein you can
move to different functionalities in your web application based on user interaction but
still stay on the same page.

Two-way binding. Angular.js keeps the data and presentation layer in sync. Now you
don't need to write additional JavaScript code to keep the data in your HTML code and
your data later in sync. Angular.js will automatically do this for you. You just need to
specify which control is bound to which part of your model.
Testing is at the heart. Angular is meant to be thoroughly tested and it supports both unit and end-
to-end testing with tools like Jasmine and Protractor.

Angular is mobile and desktop-ready, meaning you have one framework for multiple platforms.

Angular is actively maintained and has a large community and ecosystem. You can find lots of
materials on this framework as well as many useful third-party tools.

So, we can say that Angular is not just a framework, but rather a platform that empowers developers
to build applications for the web, mobile, and the desktop.

Angular Js Architecture Diagram

 What and Why is Firebase ?

Firebase is a mobile and web application development platform developed by Firebase,

Inc. in 2011, then acquired by Google in 2014.

Firebase frees developers to focus crafting fantastic user experiences. You don’t need to
manage servers. You don’t need to write APIs. Firebase is your server, your API and your
datastore, all written so generically that you can modify it to suit most needs.

When you connect your app to Firebase, you’re not connecting through normal HTTP.
You’re connecting through a WebSocket. WebSockets are much more faster than HTTP.
You don’t have to make individual WebSocket calls, because one socket connection is
plenty. All of your data syncs automatically through that single WebSocket as fast as your
client’s network can carry it.

Firebase sends you new data as soon as it’s updated. When your client saves a change to
the data, all connected clients receive the updated data almost instantly.
 HTML

•HTML is a language for describing web pages

• HTML stands for Hyper Text Markup Language
•A markup language is a set of markup tags
• HTML documents contain HTML tags and plain text
• HTML tags are keywords (tag names) surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
•The first tag in a pair is the start tag, the second tag is the end tag. The end tag is . .
written like the start tag, with a forward slash before the tag name
• Start and end tags are also called opening tags and closing tags <Tag
name>content</Tag name>
 CSS

•CSS stands for Cascading Style Sheets

•Styles define how to display HTML elements
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files CSS Syntax: A CSS rule has two main
parts: a selector, and one or more declarations: the selector is normally the HTML
element you want to style
•Each declaration consists of a property and a value
•The property is the style attribute you want to change. Each property has a value
 Database
Scribe contains three set of databases:

1. Login Credentials
2. Posts
3. Comments
User Credentials
Posts

Comments
 User Authentication
In order to make a free account on Scribe, User have to submit some of their details. Scribe
automatically generates a unique UserId to every new user and saves their data on firebase
automatically.
Later, This data is used for logging user in, showing his/her profile and making user to delete
their posts.
To register, You have to fill:
Your Name, Email Id, Password.
 Hosting
Scribe blogging platform is hosted on Google’s Firebase.
Link : https://scribe-d47db.firebaseapp.com
Or https://scribe-d47db.web.app
 Structure

Components

Route Handler
Pre-set Component

Guard file
HTML Page Rendering
Signup component
App-routing
 Data Flow Diagram

User Loads Url

App-routinng.module.ts

Loads Home Component

 Post Script
That is all I have done in my Angular Project named SCRIBE .

Scribe blogging platform is hosted on Google’s Firebase.

So, what are you waiting for? Just wrap your thoughts into the words and say a lot in
a little.

Create a free account and you will be up and running in no time.

Link : https://scribe-d47db.firebaseapp.com
Or https://scribe-d47db.web.app