Giter VIP home page Giter VIP logo

2020-04-08-roll-your-own-chrome-dashboard's Introduction

Today's Objective: Roll your own Chrome dashboard

Prize

$25 CAD Amazon gift card + bragging rights.

Tip: Read the General Information Document for more info on how to get started and submit.

Objective

  • IMPORTANT For security purposes, I will NOT be installing anyone's extensions on my local machine. To get Aesthetic points for your extension, please upload a 1 to 2 minute demo of the extension.

Today's objective is to create your own dashboard for Chrome.

Dashboards (a.k.a. "New Tab" pages) are a popular type of Chrome extension. Dashboards are relatively easy to build. In fact, they're amazing 1st projects for anyone looking to learn how to build a Chrome extension.

A very well-known one is Momentum, which replaces your New Tab page with a beautiful image, a clock, and an inspirational quote. Another is Gyroscope, which gives you your personal statistics, and Homey, which decorates your New Tab with a beautiful wallpaper and several widgets.

Requirements

So, this is your task:

Create a Chrome extension that replaces your "New Tab" page with a design of your own choosing.

That's it!

But of course, only the most interesting, useful, and cool designs will have a chance of winning -- and they must be written well, too. So, get creative :-)

How to build a Chrome extension

A Chrome extension is basically a .zip file. This project will contain a simple HTML page and some JS files zipped into a Chrome extension.

Given time constraints, you should definitely NOT build a backend component for this project.

You can read the following resources to get familiar with how to create this extension:

Suggested projects

You can create a project of your own choosing, as long as it replaces New Tab.

Please make sure you pick something that can be completed in 2 hours AND with good quality code. So keep it simple :-)

Here are some suggestions to get your brain juices flowing.

(Feel free to mix and match)

  • New Tab wallpaper replacer (Easy)
  • New Tab with useful links (Easy)
  • Notepad which persists its data (Easy)
  • Useful utilities dashboard, like calculators and converters (Easy to Medium)
  • News dashboard (Medium)
  • Bitcoin and stock prices tracker (Medium)
  • A simple game (Hard)

Frameworks:

If you're building something complex, it is recommended that you use a framework such as React, Vue, Angular or jQuery.

Chrome extensions can be built with any framework. But if you don't want to use a framework, that's totally fine, too. Especially for this project, where a basic New Tab can be built with a simple HTML file.

APIs:

Here are some useful suggestions:

  • Get a random HD wallpaper from Unsplash (Use https://source.unsplash.com/random/3840x2160 for HD wallpapers)
  • Public APIs where you can source more data. (Look for "Auth: No, CORS: Yes". These APIs don't need additional overhead such as registration in order to work with them)

Restrictions

  • Your project must use JavaScript.
  • Your project must NOT have a backend component. (It really isn't needed)
  • IMPORTANT For security purposes, I will NOT be installing anyone's extensions on my local machine. To get Aesthetic points for your extension, please upload a 1 to 2 minute demo of the extension.

There are no other restrictions.

Tips for success:

  1. The project is intentionally simple so you can focus on code quality.
  2. The requirements are intentionally minimalistic so you can get as creative as you'd like.
  3. You get a LOT of time for code review comments. So you can win even if you feel your project isn't great, simply on the strength of your code review comments!
  4. Keep in mind, 33% of your score is based on aesthetic appeal! So try to make it look nice.

2020-04-08-roll-your-own-chrome-dashboard's People

Contributors

derekjj avatar drydenje avatar monarchwadia avatar

Watchers

 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.