Coder Social home page Coder Social logo

cognizant-p1's Introduction

Project-1

Foodie

Foodie is an a discussion forum where people post and comment on a food recipe.

· DEMO · User Stories ·

User Stories

Pivotal Tracker (Foodie App)

Application Goals from User Stories are:

  • Sign-up and Create Profile Foodie User
  • Anyone can See Posts and Comments
  • Signed-in user able to post a Post and comment
  • Signed-in user able to delete it's own Posts and Comments

Approaches Used

  1. We used the async fetch to give a better user experience, so that user won’t wait for a long time to see all the posts.

  2. The navigation bar we used the conditional render to show different content for the logged in user and random visitor.

  3. We set up a home button for the profile page. In case our user who just updated their profile page and want to go back to home page to continue reading posts.

  4. In the signup page, we set the html input type to email and password, to avoid any invalid form submit.

Major Hurdles

  • Stop repeating Code in html. So used JS to type code. Create functional components to tackle this.

      * Post
      
      function postDiv(post, comments = []) {
              return `
              <div class="card post-card">
                  <div class="card-body">
                      <div class="row">
                          <div class="col-md-12">
                             ...
                             ...
                          </div>
                      </div>
                  </div>
              <div/>`;
      }
    
  • Add click eventlistener into Raw html buttons.

      function createPostDiv() {
              let div = document.createElement("div");
              div.innerHTML = `    
                  <div class="card post-card">
                      <div class="card-body">
                          <div class="row">
                              <div class="col-md-12">
                                  ...
                                  
                                  <button ... onclick="createPost()"...</button>
                                  
                                  ...
                  
                              </div>
                          </div>
                      </div>
                  </div>`
              return div;
          }
    
  • Adding multiple comments into Posts with reference to Post id.

          function postDiv(post, comments = []) {
                  return `
                  <div class="card post-card">
                      <div class="card-body">
                          <div class="row">
                              ...
                              </div>
                          </div>
                          ...
                      --> comments.map(comment => commentDiv(comment)).reverse().join('')
                  }     
                  </div>
          <div/>`;
              }
    
  • Creating Profile with Signup

        (function createSignup(){
                fetch("http://thesi.generalassemb.ly:8080/signup", {
                  headers: ...,
                  method: "POST",
                  body: JSON.stringify({
                    ...
                  })
                })
                    .then(res => res.json())
                    .then(res => {
                      localStorage.setItem("foodieUser",JSON.stringify(res));
         ---------->  creatProfile(res.token);
            })();
      ----------> function creatProfile(token) {
                      fetch("http://thesi.generalassemb.ly:8080/profile", {
                        headers: {
                          ...
                        },
                        method: "POST",
                        body: JSON.stringify({
                          ...
                        })
                      })
                          .then(res => {
                            if (res.status === 200){
                              window.location.href = 'index.html'
                            }
                          })
                          .catch(res => {
                            console.log("Error:" + res);
                          });
                    }
                  });

Timeline

  1. Requirement Analysis

    • Tuesday(Sep 24, 2019) - user stories

      We give our user stories points, so that we could priority our development steps

        https://www.pivotaltracker.com/n/projects/2400262
      
  2. Development

    • Wednesday(Sep 25, 2019) - Home page, fetch all users post and comments and display on the home page.
    • Thursday(Sep 26, 2019) - Sign up page and login started
    • Friday(Sep 27, 2019) - All the post and comments functional works.
    • Friday(Sep 27, 2019) - Manual Testing - Finished profile page and testing all the possible error.
  3. Deployement

    • Friday(Sep 27, 2019) - Deployed onto Github Sites

      DEMO

  4. Presentation

    • Monday (Sep 30, 2019) - Presentation

Wire Frame

Wireframe

Technology Used (Dependencies)

Bootstrap

We use the Bootstrap to style our html elements, paste following code inside the head tag:

  • Installation instructions
Include These files into he index.html

<head>
   ..
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   ..
</head>
<body>
    .
    .
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

Tools

  • Webstorm
  • VS Code
  • VS Code Live Server
  • Postman (API Testing and Calls)

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

cognizant-p1/
├── README.md
└── src
    ├── css
    │   ├── main.css
    │   ├── profile.css
    │   └── signup.css
    ├── js
    │   ├── main.js
    │   ├── profile.js
    │   └── signup.js
    ├── index.html
    ├── profile.html
    └── signup.html

Creators

Mingjing Tang

Mohammad Javed

Special Thanks

Comment Post Idea

    https://bootsnipp.com/snippets/M5obX

cognizant-p1's People

Contributors

gajjucoderboi avatar mingjingtang avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.