This is a an exercise in re-building a site using Angular. This is an attempt to replicate the beautiful 99% invisible site. I chose this site because I love the design, and I felt that the complexity of it would be a good challenge. The small details like audio footer that follows as you scroll through the page and the tasteful hover effects create simple intrigue to the site.
THIS IS A REPLICA AND IS NOT THE REAL SITE! THIS WAS CREATED FOR EDUCATIONAL PURPOSES!
This project was generated with Angular CLI version 1.6.5.
View the app deployed here!
- Draw a diagram of the site
- Draw the flow of the components
-
Begin building components
-
Create Layout of page with components
-
Build out individual components
-
Style individual components
-
Make API call to Listen API that returns 10 99% Invisible Episodes
-
Create an Episode Object for each episode with the following properties: - audio - description - pub_date_ms - title
-
Save each episode in firebase Database
-
For each item in database create a card component
-
Populate card component with properties
-
Embed audio into card component
-
Create routes for each episode
-
Create route episode page that has card components
-
Add categories for each episodes
-
Order by category
-
Replicate playlist footer
- Deployed to Firebase
- Database with podcasts and articles
- Pipes to filter podcasts and articles -- functional search bar and links to filter by category
- Embedded audio
- Replicate playlist footer
- Implement Listen Notes API
- Create animation with logo
- Create view for episodes and articles
- Dynamic routing to specific episode view
- Project includes a detailed README with information on all completed features as well as features to be added.
- Project includes a detailed commit history that clearly shows at least eight hours of work between 8 and 5 on Friday. You are also welcome to put additional work into your project outside of that time frame.
- Project demonstrates understanding of this week's concepts. If prompted, you are able to discuss your code with an instructor using correct terminology.
- In the terminal, navigate to local directory and run:
git clone https://github.com/paigewilliams/99-percent-invisible.git- In the terminal, go to project directory and install dependencies with:
npm install -g angular/[email protected]Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
Copyright (c) 2019 Paige Williams