Giter Club home page Giter Club logo

infowave's Introduction

๐ŸŒŠ InfoWaVe ๐ŸŒŠ

Contributors ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

Jen Nguyen

๐Ÿ“‚ Tech Stack

๐Ÿ“š Table of Contents

๐ŸŒ Overview

InfoWaVe is the place to come for tech news. Users can search for articles using keywords or browse by scrolling!

๐Ÿ—‚๏ธ Getting Started

  1. Fork or clone down this respository.
  2. In the terminal, open this app by running the command cd infowave
  3. Run the command npm install to install dependencies.
  4. Run the command npm start to start the server.
  5. Open http://localhost:3000 to view it in your browser.
  6. You can also view the project here.
  7. Use control C to stop the server.

๐Ÿ“ Planning Process

In planning for this application I spent time looking for design ideas and did a basic design schema of how I wanted my application to look. I then broke down the architecutre into how I planned to set it up in the code with all the connected routes and componenets. This gave me vision for not only the design but how the structure of the application will flow.

Screenshot 2024-01-26 at 8 33 26โ€ฏPM Screenshot 2024-01-26 at 8 33 36โ€ฏPM Screenshot 2024-01-26 at 8 33 43โ€ฏPM

๐ŸŽฅ Preview ๐Ÿ“ฑ

Infowave newsreader gif

๐Ÿ’ช๐Ÿป Challenges

  • Implementing the search functionality with a filter

  • Getting down the fundamentals of React and Router

๐Ÿ† Wins

  • Getting a better understanding of Cypress.

  • Figuring out responsive design

  • Getting a better understanding of React and how to work with components and import them where needed

  • Incorporating SASS variables and mixins for managing common styles

๐Ÿ’ก Future Ideas

  • Add favoriting feature for user to favorite and save articles for future reference

  • Allowing users to shuffle their saved articles into a particular order

  • User login for saving articles

infowave's People

Contributors

jnguyen615 avatar

Watchers

 avatar

infowave's Issues

Proptypes

Description: Implement prop types where all props are used

Tasks:

  • prop types for each component using props

Acceptance Criteria:

  • prop types implemented across components using props

Error Page

Description: set up error page

Tasks:

  • set up error page component
  • make sure it is connected

Acceptance Criteria:

  • Built error page that will be router to when a bad url is entered

User Story: As a user I should be able to click on a news card and see more details

Description: As a user I should be able to click on a news card and see more details

Tasks:

  • set up modal for news card blow up

Acceptance Criteria:

  • working modal when a news card is clicked that displayed a little more information about the article

  • BLOCKER

  • article content doesn't come in all the way - - must have link to full article

Scroll button

Description: Add in scroll button for better user experience when scrolling through the main articles

Tasks:

  • build out scroll button

Acceptance Criteria:

  • scroll button exists on the dom when a user scrolls down the page
  • the button enables the user to go back to the top of the page

Add Responsiveness

Description: Add responsiveness

Tasks:

  • screen is responsive across all screen sizes
    • desktop
    • mobile
    • tablet

Acceptance Criteria:

  • app is responsive across all screen sizes

User story: As a user I should see news articles on the page

Description: As a user I should see news articles on the page

Tasks:

  • build out article container
  • built out news cards:
    • title
    • author
    • url
    • image
    • description
    • content
    • index
    • key
    • date
  • connect them together to display the cards and make sure they are connected to the api

Acceptance Criteria:

  • news card display in the article container when the app is initially opened

Create Wireframe

Description: Create Wireframe for project showing off design ideas, inspirations and the architecture.

Tasks:

  • design inspiration
  • base design idea for app
  • architecture layout

Acceptance Criteria:
Wireframe detailing the above criteria

Build out architecture

Description: Build out base architecture for app

Tasks:

  • following wireframe build out components needed for architecture

Acceptance Criteria:

  • Base architecture built out for app

API call

Description: Implement the api call to retrieve the data

Tasks:

  • connect the api

Acceptance Criteria:

  • data can be console.logged within the use effect to see the data coming through

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.