Citrual_App

Technology Stack Used

HTML5
CSS3/SASS - Used PrePros to complie SCSS files to CSS
W3.CSS
jQuery
AngularJS 1.6.4
MongoDB/mLab
Mongoose
ExpressJS
NodeJS

! Make Sure your Interent is working for this App to work becuase it makes use of the CDNs from the internet and also the Database is hosted on mLab

The application is running on port 4001 so make sure there is no service attached to that port

This is built using MEAN stack, Node and Express for server side scripting, AngularJS 1.6.4 for Front End and MongoDB hosted on mLab for the back end database

TO DO's before you start

Make sure your internet is working
Install Node onto your system and NPM comes with it

Let's get started....

Clone the repo and open the project folder
Open your Command Prompt and use it to navigate to the project folder
First thing to do is run the command "npm install" to install all the dependancies, you do not need to run this command because I downloaded all the dependancies into the node_modules folder, but I'd suggest to do it since it is safer to know everything is installed perfectly.
Now that you have installed all the dependencies, it is time to run the application, stay in the project folder on your command prompt and type "node server" and that should start your server on port 4001
It is time to open the browser and go to "127.0.0.1:4001" or "localhost:4001", TADA....

I hosted my database on mLab which provides online services for MongoDB and you can use it by following the steps :

To access my data, first one needs to install MongoDB onto their computers, once done, set environment variables
Go to command prompt now and type "mongo ds017726.mlab.com:17726/custdb -u admin -p admin" in your shell to connect to my online DB
once done, type "db.customers.find().pretty()" on your shell and press enter, you will have access to my data.

Here is a Sample DB Schema with data

Here is the Final Product

Home

Laptop & Desktop View

Mobile and Tablet View

You could still scroll left and right to view additional data

A full functional Sidebar for Mobile View

Applied Search Filters so one could filter by Name

Search with "C"

Search with "Co"

Search with "Cou"

Navigation to other pages while maintaining the header

Inbox Page

Calender Page

Profile Page

Requirements Accomplished

Implemented the exact Wireframe as given in the Cirtual Image
All buttons on the header link to other pages while maintaining the header across all pages
The data doesn't come from local website, it comes from DB hosted on mLab
Search only Filters the data according to the name typed in the search bar
Maintained session state and data persists even after page refresh
Made the website responsive with an animated menu bar for small screens

Thank you and have fun

Name		Name	Last commit message	Last commit date
Latest commit History 37 Commits
.idea		.idea
models		models
node_modules		node_modules
public		public
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
prepros-6.config		prepros-6.config
server.js		server.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Citrual_App

Technology Stack Used

! Make Sure your Interent is working for this App to work becuase it makes use of the CDNs from the internet and also the Database is hosted on mLab

The application is running on port 4001 so make sure there is no service attached to that port

This is built using MEAN stack, Node and Express for server side scripting, AngularJS 1.6.4 for Front End and MongoDB hosted on mLab for the back end database

TO DO's before you start

Clone the repo and open the project folder

Open your Command Prompt and use it to navigate to the project folder

First thing to do is run the command "npm install" to install all the dependancies, you do not need to run this command because I downloaded all the dependancies into the node_modules folder, but I'd suggest to do it since it is safer to know everything is installed perfectly.

Now that you have installed all the dependencies, it is time to run the application, stay in the project folder on your command prompt and type "node server" and that should start your server on port 4001

It is time to open the browser and go to "127.0.0.1:4001" or "localhost:4001", TADA....

I hosted my database on mLab which provides online services for MongoDB and you can use it by following the steps :

To access my data, first one needs to install MongoDB onto their computers, once done, set environment variables

Go to command prompt now and type "mongo ds017726.mlab.com:17726/custdb -u admin -p admin" in your shell to connect to my online DB

once done, type "db.customers.find().pretty()" on your shell and press enter, you will have access to my data.

Here is a Sample DB Schema with data

Here is the Final Product

Home

Laptop & Desktop View

Mobile and Tablet View

You could still scroll left and right to view additional data

A full functional Sidebar for Mobile View

Applied Search Filters so one could filter by Name

Search with "C"

Search with "Co"

Search with "Cou"

Navigation to other pages while maintaining the header

Inbox Page

Calender Page

Profile Page

Requirements Accomplished

Thank you and have fun

About

Releases

Packages

Languages

navaneethr/citrual-app

Folders and files

Latest commit

History

Repository files navigation

Citrual_App

Technology Stack Used

! Make Sure your Interent is working for this App to work becuase it makes use of the CDNs from the internet and also the Database is hosted on mLab

The application is running on port 4001 so make sure there is no service attached to that port

This is built using MEAN stack, Node and Express for server side scripting, AngularJS 1.6.4 for Front End and MongoDB hosted on mLab for the back end database

TO DO's before you start

Clone the repo and open the project folder

Open your Command Prompt and use it to navigate to the project folder

First thing to do is run the command "npm install" to install all the dependancies, you do not need to run this command because I downloaded all the dependancies into the node_modules folder, but I'd suggest to do it since it is safer to know everything is installed perfectly.

Now that you have installed all the dependencies, it is time to run the application, stay in the project folder on your command prompt and type "node server" and that should start your server on port 4001

It is time to open the browser and go to "127.0.0.1:4001" or "localhost:4001", TADA....

I hosted my database on mLab which provides online services for MongoDB and you can use it by following the steps :

To access my data, first one needs to install MongoDB onto their computers, once done, set environment variables

Go to command prompt now and type "mongo ds017726.mlab.com:17726/custdb -u admin -p admin" in your shell to connect to my online DB

once done, type "db.customers.find().pretty()" on your shell and press enter, you will have access to my data.

Here is a Sample DB Schema with data

Here is the Final Product

Home

Laptop & Desktop View

Mobile and Tablet View

You could still scroll left and right to view additional data

A full functional Sidebar for Mobile View

Applied Search Filters so one could filter by Name

Search with "C"

Search with "Co"

Search with "Cou"

Navigation to other pages while maintaining the header

Inbox Page

Calender Page

Profile Page

Requirements Accomplished

Thank you and have fun

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages