Ideas for beginner UI project
Tags: codenewbie, javascript, beginners, programming
Published: 2020-07-30 14:21:57


When starting with web development, one of the most often advice you get is to build a project. At the same time, excellent and terrible advice. Terrible, because so many get stuck on deciding which project to do. Often people overthink it. They want to build something new, innovative, and different from anyone else. Truth is you don’t need to. When working in a business environment, there are structures that you keep repeating, just in different use cases. And if you build on your own something that uses those structures, it is enough. In this post, I am naming some possible beginner web application ideas that could be good showcase projects.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x8q2kfujcan7su9kp2fg.jpg)

## Structures

### CRUD

CRUD is shorthand for create, read, update, and delete. And in any application, these are the actions you continuously repeat. It may be a comment on YouTube, post on Twitter, the image on Instagram, or anything else. You create that content; you read it; you update it, and you delete it. Those are actions you build in your application, just maybe in a different use case.

### User interface

When it comes to the user interface, it is placing blocks, lists, and tables around. That might be a list of items in the menu, a list of products in the webshop, table of exam results. Still, again, it is placing blocks, tables, and lists differently and styling them.

## Project ideas

### TODO list

![Alt Text](https://miro.medium.com/max/1400/1*bqBs4mRZpQKbyc8ooU93jA.jpeg)
 
The TODO list is one of the most common programming tasks in coding interviews. And that is for a reason. If we are talking about the simplest version, one list item is straightforward. It contains only text. But from the application level, you have to build a form to enter a new one, list of existing ones, and maybe delete button. If you want to make it a bit more complicated, maybe edit button and some way to mark it as completed. Or perhaps even filter to search for a specific item in the list and separate screen that would show completed ones. The next level would be integration with some API or just loading the initial list from the JSON file. In total, a simple application with ways to demonstrate your knowledge.

### Phone book

The phonebook is another application with CRUD actions on one model. It is very similar to the TODO list and is often a coding challenge. Almost everything that is named above for the TODO list is valid in a phonebook also. The difference is that model is a bit more complicated. Here we have a first name, last name, phone number, maybe address, and whatever you want more. To make it more interesting, add different validations to the form like that it is a valid phone number entered.

### Blog
 
![](https://miro.medium.com/max/1400/1*3eNLYfyWyxM2MEG2eWITeQ.jpeg)

Once again, when it comes to structure, very similar to the first two applications. One model, blog post, which contains text, title, id, and maybe author and created date. Yes, you can make it more complicated, but this is a minimum. And if you want to do an extra step, add a form for adding a new post and router. With a router, you can have multiple pages, one to enter a post, second to list all posts, and third to display just one post. Taking it even further, add some API so you can store it.

### Webshop

Webshop is a bit more complicated than the first three but still follows the same patterns. This time it is just more than one model. You would have item and cart at a minimum, and you can treat the purchase as the third model. You display a list of items. On click, items are added or removed to cart, and in the end, you purchase it and empty cart. Actions performed on the model are the same. Still, with this project, the focus is a bit more on the interaction between different ones.

## Wrap up

Coming up with ideas for the first project is challenging, And people tend to overthink and over-engineer it. They put massive pressure on themselves and plan to create something that would take weeks and months to implement. And then often don’t complete it because they lose interest over time. What I hope you got from this post is not to do that. There is nothing wrong with creating an application that already exists. Your goal is to demonstrate your knowledge. Also, don’t be afraid to start. 
As you can see, patterns are similar. Those objects are a bit different, and maybe there are more of them. Sometimes, they also interact with each other, like in webshop.  But it is still quite similar. Create, read, update, and delete. So pick one and start coding and have fun.

***

For more, you can follow me on [Twitter](https://twitter.com/hi_iam_chris_), [LinkedIn](https://www.linkedin.com/in/kpajtasev/), [GitHub](https://github.com/kristijan-pajtasev/), or [Instagram](https://www.instagram.com/hi_iam_chris_/).