media-streaming

Live demo 🚀: https://media-streaming.vercel.app/

A serverless AMP-to-PWA media-channels browser SPA built with React, Ant and Gatsby.

🚀 Quick start

Note: if you don't have yarn installed you literally search-and-replace "yarn" with "npm run".

1. Start developing.

   Start in dev mode.

   yarn start

2. Open the source code and start editing!

   The app is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Formatting and Linting

Formatting and lint is done with Prettier and Eslint

Run yarn lint to lint the code and yarn format to fix all lint & formatting issues

Testing

Run yarn test to run unit tests using jest and enzyme.

Building static app

Run yarn build to build the static web application. This create the /public folder that is ready to deployed out.

Serving static app

Run yarn serve to serve the static web application on http://localhost:9000!

🧐 What's inside?

A quick look at the top-level files and directories you'll see in this project.

├── public 
├── src
├── static
├── tests
├── .eslintignore
├── .eslintrc
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
├── README.md
└── renovate.json

1. /public: This directory represents the static website. It can be deployed anywhere; even on the edge! The contents of this folder are automatically generated by the build command.

2. /src: This directory contains all of the source code related to the application. Subfolders are:

   2.1 /components: All the React components. In the future we will make it mandatory to have css and unit tests along with each component.

   2.2 /pages: All the pages of the application (So far the index page and the 404 page).

   2.3 services: All the services that are consumed by the application. So far only Ajax calls.

   2.4 state: It contains all the state management code (state, reducers, actions, dispatch, Redux store...). So far only used for the main menu drawer.

   2.5 style: Contains style variables values as well as less file to override ant library variables values

   2.6 util: All the miscellaneous modules used by any of the modules in the folders above.

3. /static Contains static files that are copied to the root folder when /public folder is created.

4. /tests Holds scripts for testing using Enzyme on top of Jest.

5. .eslintignore: This file tells ESLint which files it should not lint or fix.

6. .eslintrc: This is a configuration file for ESLint. ESLint is a static analyzer for EcmaScript.

7. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

8. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

9. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

10. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

11. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

12. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

13. README.md: A text file containing useful reference information about your project.

14. renovate.json: This is a configuration file for Renovate. Renovate is a bot that automates Pull Requests whenever dependencies need to be updated.

Todo list

• Overlay the play/pause icon on top each channel card
• Display a dummy channel image thumbnail when a channel image fails to download.
• Strictly use Redux for state management
• Cache data that doesn't change frequently change (such a stations.json)
• Measure and increase test coverage (using coveralls)
• Add unit tests for helper functions
• Add mock tests external services
• Add integration tests
• Split layout.css into <component>.css per component
• Use emotion css-in-js framework even more
• Add index.js to each subfolder of components to act as an interface between the components in the subfolder and the rest of the project. This make components more reusable
• Perform an initial SEO pass

Copyright

Copyright © 2020 Majid Mallis