Skip to main content

Online Classifieds Application

A single page application where people can view existing products available on the site and also can add products. Admin can update and delete existing products.

Tools Required: 

I used AngularJS framework for developing a single page application. Also used Angular material UI component framework to design  this application. The following tools and packages must be used in order to accomplish this project:
  • Visual Studio Code - Text editor.
  • AngularJS, Angular Material
  • HTML5, CSS
  • JSON
  • Node.js 
  • Firebase

Classifieds single page application:



As you can see in the above application we have few classifieds,  used some static data to populate the website. Angular material was used to design this application. When we click on the contact button it will display all the details related to the person who posted the classified

and when we click on the Details button it will display the details of the product.An admin also has functionalities like editing and deleting a classified.so when we click on the Admin button we get two options such as Edit and Delete. We can click on the close button in order to hide these two options.


CRUD Operations:

We can also perform CRUD operations i.e. creating, adding, updating and deleting a classified.
1. Adding new classifieds: 
    
In the above image we can see a new classifieds button which when clicked will display a side navigation bar where we can add a new classified. After filling in the details we can click on the save button and the new classified will appear at the bottom of the application.


2.Updating existing classified:

As we saw earlier an Admin can edit or delete a particular classified. so when an admin clicks on the edit button a side navigation bar will be displayed on the application where the Admin can edit the classified.


and as soon as the admin clicks on the save edit button a notification pops up showing that the classified has been saved


3. Deleting a classified:
An admin can also delete an existing classified by clicking on the delete button and the classified gets deleted from the application.

Angular Filters:

Angular filters provides a nice way for users to drill down for exactly what they are looking for and data updates in real time. When we click on Filters button the toolbar two search icons are displayed. we can manually type the item we are looking for.


Or we can select the category button which is like a drop-down menu and displays all the different categories in the application.



 We also have an option to clear the search field by clicking on the Clear button.




UI Routing:

AngularJS provides a routing API, this API lets us get individual routes within out URL bar for various spots within our application.
For example: localhost:8080/#/classifieds/edit
The above URL lets us have direct access to the edit option in the classifieds page instead of going to the classifieds page and then selecting the edit option.

Firebase:

Now a user can perform the CRUD operations but lets say i tried adding a new classified after adding i refresh the page and i loose my data. Firebase (a relational database) allows us to persist all classified listings in the database and allows us to access them easily within the application.



Comments

Post a Comment

Popular posts from this blog

University Events Portal

TAMUC Events Portal:  Description :  In this web application, students can create events for a scheduled time and venue and attend the events. Also, students can edit and delete the events as well. These are the following Technologies used to develop this application:  Text Editor ( Visual Studio Code ) MongoDB mLab JQuery AJAX NPM Node JS GIT Shell Deployed this application in MongoDB Server provided my mLab. Wrote commands in GIT shell in order to access the MongoDB Server. When we issue the com­mand $ npm start from the root direc­tory of our nodejs project, node will look for a scripts object in ourpackage.json file. If found, it will look for a script with the key start and run the com­mand spec­i­fied as its value. A database which we create in mLab Output:  Provided users to sign up using the 'create an account' feature in the application as shown below.  Figure-1: Home page of the Portal All the Events as...
2 comments
Read more

Ride Buddy, a Carpooling mobile application for Android users

Our motto: “Get or give a ride just a click away” inspired us to build “RIDE BUDDY”, a real-time carpooling and ride sharing mobile application. There are many universities where the students face a common problem of commuting to their desired location, as many of them cannot afford to rent or have their own car. Most of the universities do not have public transportation, cab facilities like “Uber” and “Lyft”, which should be treated as a major problem.                  This application will ease the commuting problems of all students. “Ride Buddy” would not only serve students who need a ride but will also allow students who have cars to help others. A student who has a car and willing to give a ride can post that he/she is going to a particular destination at a particular time, a student who needs a ride can look in to the different rides available and pick one contact that student who is giving a ride . A student can request a ride to...
Read more

Data Analysis using Twitter API

Overview: In this project we concentrated on topics such as: Which topic is trending,  Tweets relating a hash tag The data in twitter formulates a rich source which can be used for retrieving information. We can use this data in many ways for example: Finding trends related to a specific keyword  To gauge brand sentiments.  To collect feedback of new brands, products and their services. Tools Needed:  We used Python programming language. The following tools and packages are must in order to accomplish this project. Python 2.7 Packages : pip, pandas, Tweepy, matplotlib, jupyter Jupyter Notebook Access tokens with which twitter gives permission to access their API. Connecting to twitter API:  Twitter requires all requests to use OAuth for authentication. We will assign the keys to their respective variables for use, and also connect to the Twitter API using "tweepy". The commands are shown below: consumer_key = '<Your Consum...
Read more