DEV Community

Cover image for In Need of 100 Days of Code Ideas
Tina Huynh
Tina Huynh

Posted on • Updated on

In Need of 100 Days of Code Ideas

Disclaimer: This challenge will not be started until my current project reaches a publishing state

The aim is to start by April 7th


I want the time before officially starting the challenge to build a penciled in timeline for myself. I am leaning towards doing a project a day during this span of time and am compiling a list of HTML/CSS, JavaScript, React, and/or TypeScript projects to help me further my skills in these areas.

Any suggestions that the community has previously done or know is a great beginner project to start with would be greatly appreciated. So far my list starts with an Arkanoid game with TypeScript, an expense tracker and card memory game with React, and several others.

Thanks for being the supportive and encouraging community you are

Happy coding!

Buy Me A Coffee

Discussion (23)

Collapse
theaccordance profile image
Joe Mainwaring • Edited on

In addition to code, you could define exercises around the supporting tasks to take a project from source code to production. Some examples:

  • Setting up your project on Day 1 on Github. Configuring tools, PR Templates, protected branches, squash on merge, and CI workflows are a great piece to scaffold in the beginning
  • Dedicate one day to configuring cloud resources for your application
  • Create a CI/CD workflow where changes that are merged into master are deployed to a develop environment
  • Creating an automated workflow that builds your code
  • Creating a CI/CD workflow that deploys your application to production when a release is created
  • Add a CI step which lints every commit you push to Github

Some other general exercises that would be useful building a career in coding:

  • Localizing your application so it can be translated
  • Writing tests for your code!
  • Write a Readme.md page for your project
Collapse
marissab profile image
Marissa B

Perfect list. Sometimes we get wrapped up in the project-specific features as checkpoints for progress (who doesn't want to show off a cool new thing their project does?) and overlook the workflow side of things.

Collapse
tmchuynh profile image
Tina Huynh Author

What a wonderful idea to add to the list! I will definitely add more behind the scene type tasks. Thank you for your suggestion

Collapse
shriekdj profile image
Shrikant Dhayje • Edited on

This Are My Suggestions which i am also planning to do, maybe some this help you or not.

  • Product Landing Page
  • Color Flipper
  • Infinite Scroller (Similar to Facebook without any end or youtube mobile)
  • Personal Portfolio Web Page
  • Documentation of Some Technical Product or Software
  • Admin Dashboard Design
  • Music Player Site (Like Spotify)
  • Video Player Site
  • GitHub's Mermaid Project Integration
  • Blog
  • How to survive in Aliens Attack Webpage
  • Beautiful Contact Form
  • Comic Book Advertisement On Website
  • School Website
  • File Manager Like Website
  • Random Name Generator
  • Coin Flipper
  • Dog Flipper
  • Custom Twitter Embed

This Comment is getting Bigger So I Will Try To Make this Post Maybe And Will Give Link

Collapse
tmchuynh profile image
Tina Huynh Author

I love all your suggestions! I would absolutely love a link if you end up creating a post from this. Thank you

Collapse
shriekdj profile image
Shrikant Dhayje
Thread Thread
tmchuynh profile image
Tina Huynh Author

Thanks for the link!

Collapse
shriekdj profile image
Shrikant Dhayje
Collapse
coderallan profile image
Allan Simonsen

How about:
Day 1: Make tool to generate list of 99 random project ideas
Day 2: Create project number 1 from the list generated on day 1
Day 3: Create project number 2 from the list generated on day 1
...
:-)

Collapse
tmchuynh profile image
Tina Huynh Author

Wonderful idea to shuffle around the projects

Collapse
coderallan profile image
Allan Simonsen • Edited on

On a more serious not, how about these

  • Creating random art using the html canvas
  • Creating random logos using html canvas
  • Make googly-eyes tracking the mouse pointer
  • Use math and html canvas for animating lines, dot, squares
  • Learn the dev.to api developers.forem.com/api
  • using Leaflet.js leafletjs.com/SlavaUkraini/example... to show information on maps
    • Find data for presenting like earth quake frequency
    • Meteorological data like rainfall or wind
    • Traffic data on a given date
  • Using Google js charts library (developers.google.com/chart) or other chart js libraries for visualizing data
  • Visualize math formulars as graphs with sliders for changing formular parameters
Thread Thread
tmchuynh profile image
Tina Huynh Author

Sounds great! Thanks for the suggestions

Collapse
oricis profile image
Moisés Alcocer • Edited on

I work in some small projects with react some time ago:

Or in Vainilla JS:

There are many project that are typical to practice for begginers.
Maybe, the more interesting is to create pages or components that you can use in a future in real projects as one ecommerce, browser game, etc.

Collapse
tmchuynh profile image
Tina Huynh Author

I love the ideas. Thanks for the suggestions and links. I will definitely add them to the list. The more ideas I get, the more I look forward to this challenge. I can't wait to get started!

Collapse
booleanhunter profile image
Ashwin Hariharan

Might I interest you in the following ones? 😄

  1. Build your own Uber-for-X app: This is a good way to learn JavaScript and Web sockets
  2. Build a social audio chat application: A nice way to understand how WebRTC works

I implemented these projects using regular JavaScript with JSDoc comments for type annotations and function signature. I think it would be a super fun exercise to implement them using React / TypeScript.

Hopefully you like the project ideas to give them a shot! Feel free to ask me in-case you have any questions!

Collapse
tmchuynh profile image
Tina Huynh Author

Hi Ashwin,
They sound like enticing projects. Thanks for the suggestion. I will look into it more

Collapse
muchwowdodge profile image
Anton Rhein

I am not aware of the supposed feature-richness of the ideas you had so far, but especially the expense tracker might serve for more than one day 😉.
You could practice proper (and good) documentation for any of your projects as well. There should be plenty of articles available covering good documentation.

Other ideas:

  • Build landing pages for imaginary companies or products
  • Check out Gatsby and Next.js, maybe build your own blogging page, or pages about anything you like else (as a way of managing dynamic content)
  • build a simple real-time messenger in the web (for learning websockets)
  • setup a node js server that listens on 0.0.0.0 and delivers a web page, which uses the device's camera to scan a QR code and post's the data back to the server ( which ultimately adds scanning capability to your laptop 😉. QR Scanner libs are also available)
  • built a webrtc/websocket canvas as a collaborative whiteboard 😉
Collapse
tmchuynh profile image
Tina Huynh Author

Yes, I am and probably forever will be trying to improve the documentation that I write to better explain code. You have reminded me of some project ideas I had forgotten about. Thank you! I will definitely take a look into the details of these

Collapse
premjeet profile image
PremJeet

You can select few UI's and replicate them using HTML and CSS to improve design skills.
Here are few resources :
uidesigndaily.com/
collectui.com/
lapa.ninja/

Collapse
tmchuynh profile image
Tina Huynh Author

That is very true. It would allow me to focus mainly on the front-end of things. And if I wanted to, I can add functionality to the layout to expand the project.

Collapse
premjeet profile image
PremJeet

yes, developing a eye for design and layout will surely help in the long run?

Collapse
tmchuynh profile image
Tina Huynh Author

What an interesting idea, Leonid. I may add a version of your idea to the list and possibly expand on it in the future.