DEV Community

Cover image for I made a thing: Javascript Web Starter Projects
Willem Odendaal
Willem Odendaal

Posted on

4 3

I made a thing: Javascript Web Starter Projects

Modern Javascript web development is fantastic, but it can be tricky to get started, especially when getting different technologies to work together.

There are lots of long-form tutorials on the web that explain how to get started with a particular combination of technologies, for example: "How to set up Webpack with React and Babel". But I usually find these a little frustrating, as they don't cover all the technologies I had in mind, or they cover some technologies I'm not interested in.

So I created a repo on Github with a collection of starter-projects, to be used as a learning aid. Each starter project focuses on minimalism (but usefulness) and shows how to connect various technologies.

Here are the goals I tried to stick to:

  • Keep projects small, but useful enough to be used as a "starter" template for new projects.
  • Project should at the very least render an index.html page and use some Javascript.
  • Add lots of code comments to explain technology choices.
  • Be specific about package versions of the technologies used.
  • Specify an "updated" date, so it's clear how up-to-date a project is.

The projects use a combination of technologies, like ES2018, TypeScript, Babel, WebPack, React, Redux etc. But this isn't an exhaustive list; I imagine many more technologies and combinations of them can be added.

Since there is no particular order or importance to the projects, I decided to name them as "project"-color-animal. So currently the projects have names like: project-navy-cricket and project-neon-gadfly.

As mentioned above, the goal of the overall Github project is to serve as an additional learning aid (to be used in conjunction with relevant tutorials on the web), to show how to get going in a very practical way.

Here is the Github repo address: willemodendaal/javascript-web-starters

On contributing:

If anyone is keen to join in and make life easier for others. Help would be very much appreciated! I'm sure the projects themselves can be simplified, mistakes corrected, or new technology combinations can be added!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (1)

Collapse
 
maxdevjs profile image
maxdevjs

Great (and up-to-date) repo!

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more