FullStack-Client-Side-Work

A collection of frontend projects and proof-of-concept work approached from a full-stack developer’s perspective.

1. TaskTrackerApp (angular v22 project)

Technologies used: angular, typescript, javascript, html, css, json server

2. FoodShareApp

Technologies used: Swift,Firebase,Cocoa pods

Motivation: I wondered about this idea of connecting people for the cause of food :) The purpose of my FoodShare App is to reduce Food wastage & share food with people who need it.

Project was developed in XCode environment using Swift. It was a MVC Architecture based project. Why MVC?

• Loosely coupled modules

• Separation of concerns

                                             CODE-FLOW
                  ----------------------------------------------------------------------------
                  
  1. User logins/registers using the Signup/login page.
  2. Storing the information of the application in a real time database, Firebase - A Google offering. It was the real time database used for user authentication and storage.
  3. Cocoa pods used: Firebase, Firebase database, FirebaseAuth, SwiftKey
     Why?
      - cocoapods is a dependency manager for Swift & Objective-C projects. It has over 27,000 libraries.
      - cocoapods help in scaling the project.
      Command: $sudo gem install cocoapods;
  4. Food Display based on the location.
     How was this done?
      - MapFramework was used,(MapKitView) available in the X-Code, just drag and drop to the storyboard.
  5. Map feature indicating direction to pick up food from the donor.
  

3. GraduateDeptWebsiteFrontEnd

Technologies used: JQuery library, Javascript, HTML5, CSS3

                                                   CODE-FLOW
                                -----------------------------------------------------

1. Used Modular programming approach of Front end design.

   • Create .js files & have intercalls between functions.

2. In jQuery, we can access the 'id' defined in HTML page using "$" Ex: $("#name").click(function() { })

3. ISTMain.html is the html file. - IST.js and Services.js are the two javascript files invoked from ISTMain.html. - styles.css is the style sheet used

4. Plugins Used jQuery UI Plugin

   • jQuery UI is a set of user interface interactions, effects, widgets & themes built on top of the jQuery javascript library. whether building a highly interactive web application or adding a date picker to a form control, jQueryUI is the choice.

jQuery Datatables Plugin

• It's a jQuery plugin which adds advanced features to any HTML table

jQuery Dialog Plugin

• A jQuery plugin which which provides with the feature of opening content interactively

Cookies? - small text files that are placed on a users users computer by a website. - < 4 KB - They can only store strings - Two types: session cookies(they are stored as long as the browser is open,no expiration), persistent cookies(they expire,stores on the user's disk until the expiration date)

Local-Storage? - After HTML5 came out, Local storage has replaced cookies. - Important difference is unlike cookies, data does not have to be sent back and forth with every http request. - Local storage can hold up to 5MB of information. - Local storage can not only store strings but also Javascript objects.