/jeevan-rakht

This application is a collaborative project made by the Google Udacity Front End Web Developer Scholars.

Primary LanguageJavaScript

GoogleUdacity_JeevanRakht

The code and development of the JeevanRakht's website is housed here.
For more details - Refer to this paper.

Project Wireframe

wireframe - flow

Getting Started

jeevanrakht has separate home page for website and web application. This project consists of two part like all web application.

  • Frontend Part -- HTML, CSS, jQuery and Bootstrap4
  • Backend Part -- Node.js with express.js and MongoDB

Color palette

color palette

Homepage Mockup

jeevanrakht.pdf

Web Application page

https://jeevanrakht.herokuapp.com/

Website page

https://jeevanrakht.herokuapp.com/index.html

Learn About Folder Structure (Check FAQ for more info on folder structure)

Backend Part (node.js with MongoDB)

  • \bin:
  • \config:
  • \db:
  • \models
  • \routes
  • \views
  • \controllers
  • app.js

Frontend Part

  • \public -- html files
  • \public\assets -- This will have scss, css, js, images
  • gulpfile.js -- This is a task runner to launch app and monitor for file(scss,css,js) changes and reloads the browser.

Common to both Frontend and Backend

  • package.json

Below is used to generate Optimized Image

Below is used to deploy web app on Heroku

How to launch the app locally?

  • Step1 -- Fork the project repo and clone it in your local directory
Note : You can directly update the frontend components inside public\ directory
but we have used gulp to automate the process. You need not to refresh the page after each change
or go to codepen to check your changes you made in scss or html or js files. Just run gulp and have fun.
  • Step2 -- Download and install Node(latest stable version) (npm comes along with node)
    Node -- (e.g v 8.11 )
    What is npm?
verify with below command
>>>node -v
>>>npm -v
  • Step3 -- Install the npm modules from the package.json
>>> npm install
  • Step4 -- Launch the application using below command:
Below command will run gulpfile.js and start the static website(Frontend)
>>> npm install -g gulp
>>> gulp
The application will be running at http://localhost:3000 URL

What is gulp? gulp_run

OR

Below command will start as full web application(Backend+Frontend)
>>> npm install -g nodemon
>>> npm start
The application will be running at http://localhost:3000
if not then please check if you have set any default PORT in your environment/path variable
i.e http://localhost:<your_env_port_variable>

node_run

  • Step5 -- No more steps
Connect with co-mods if you stuck anywhere

RESTFull APIs for jeevanrakht web application

jeevanrakht_REST_APIs.pdf

Contributing Guidelines

  1. Add assets such as images and other media in assets folder.
  2. Follow standard coding practises, naming conventions and the regular document object model (DOM).
  3. Make issues on GitHub to propose new features, bugs and then make a PR referencing the same.
  4. It is now mandatory for everyone to comment on every PR made and read other people's code.
  5. Write your name in Contributors section below when PR is made.
  6. Make sure you update your REMOTE ORIGIN in case you have forked this repo : Refer
  7. Once you update the forked repo make sure you rebase the changes and then open the PR. Refer
  8. Every PR should only have one logical change and the least number of commits possible (If for some reasons the commits are higher then the creator of the PR would be asked to squash them.) If he/she doesn't comply, then PR is not to be merged.
    Refer in case there are multiple commits.

FAQ

  • I can see many changes in the parent project repo, how may I sync my github repo with parent repo without losing my changes which I am currently working on in my local?

  • How can I get the link to add in PRs to show my changes?

  • Where is the homepage for the jeevanrakht?

    • jeevanrakht has separate home page for website and web application. views/app.hjs is the home page for web application whereas /public/index.html is the static page for our website.

  • Where to start, I am not getting where are the html files for the website and web application?

    • All html files for the website is inside /public folder and all the html files for web application is inside /views folder under different modules.

  • I don't see any html files in /views folder

    • All the htmls are there with .hjs extension under /views, feel free to open and edit it like you do any other html files

  • There are many subfolders inside /views, I can see only app.hjs and 404.hjs files

    • We have divided and modularized our folder structure based on the functionalities to manage the files efficiently otherwise it will be very chaotic once your project grows. Below are the main modules in our application: /auth -- It has all files related to authentication e.g login, signup, forgot pw pages etc /main -- It has main components of application e.g locate and donate related pages. /profile -- It contains pages corresponding to user profiles, update email, mobile etc. /others -- All other random files are kept here.

  • What is 404.hjs file used for?

    • 404.hjs is default page to be shown to user if he/she visits any URL wrong path which is not the part of jeevanrakth application.

Contributors

  • Utkarsh Gupta
  • Imran Khan
  • Vidit Kothari
  • Gaurav Singh
  • Shashank Kumar
  • Soumya Ranjan Behera
  • Sujan Patel

Working Repo/Site

Style Guide

This style guide acts as the official guide to follow in your projects. Udacity evaluators will use this guide to grade your projects. There are many opinions on the "ideal" style in the world of Front-End Web Development. Therefore, in order to reduce the confusion on what style students should follow during the course of their projects, we urge all students to refer to this style guide for their projects.