DEV Community

Cover image for 5 projects to master Front End Development
Tapajyoti Bose
Tapajyoti Bose

Posted on • Edited on

5 projects to master Front End Development

If you are starting on the journey to becoming a Front End Developer, once you get the basics down, you might want to make projects as the best way to learn any skill is to try making something hands-on. This article is for anyone trying to take their skills to the next level, as well as for people who is at a loss for project ideas.

Here are five project ideas to help you out, according to no order.

1. Real-Time Chat App

A Real-Time chat application sends and shows messages to a recipient instantly without any page refresh.

This is a very lucrative project to have in your portfolio as it showcases that you have experience working with real-time data as well as authentication. If you are a Full-Stack Developer, you might also want to create the backend for the application for some extra brownie points in the eyes of the person checking it out.

Demo

SmartsApp

Web-app: https://smartsapp-ba40f.firebaseapp.com

GitHub logo ruppysuppy / SmartsApp

💬📱 An End to End Encrypted Cross Platform messenger app.

Smartsapp

A fully cross-platform messenger app with End to End Encryption (E2EE).

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Platforms Supported

  1. Desktop: Windows, Linux, MacOS
  2. Mobile: Android, iOS
  3. Website: Any device with a browser

Back-end Setup

The back-end of the app is handled by Firebase.

Basic Setup

  1. Go to firebase console and create a new project with the name Smartsapp
  2. Enable Google Analylitics

App Setup

  1. Create an App for the project from the overview page
  2. Copy and paste the configurations in the required location (given in the readme of the respective apps)

Auth Setup

  1. Go to the project Authentication section
  2. Select Sign-in method tab
  3. Enable Email/Password and Google sign in

Firestore Setup

  1. Go to the project Firestore section
  2. Create firestore provisions for the project (choose the server nearest to your location)
  3. Go to the Rules

2. E-Commerce Store

E-commerce stores allow users to buy and sell goods or services using the internet and transfers money and data to execute these transactions.

This project also involves authentication as well as keeping track of a user's previous orders, cart, etc resulting in a complex project, which tells the viewer you can solve complex development problems.

Demo

Pizza Man

Web-app: https://pizza-man-61510.web.app/

GitHub logo ruppysuppy / Pizza-Man

🍕🛒 An e-commerce website to order pizza online

Pizza Man Project

An E-Commerce website for ordering Pizza Online

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Tools used

  1. React: To create the Single Page App
  2. React-Router: For Routing
  3. Redux: For State Management
  4. Firebase: As a DataBase

Firebase Setup

You need to create a firebase configeration file holding the firebase settings in the path /src/firebase/config.js. The required format is:

const firebaseConfig = {
    apiKey: "API-KEY",
    authDomain: "AUTH-DOMAIN.firebaseapp.com",
    databaseURL: "DATABASE-URL.firebaseio.com",
    projectId: "PROJECT-ID",
    storageBucket: "STORAGE-BUCKET.appspot.com",
    messagingSenderId: "MESSAGING-SENDER-ID",
    appId: "APP-ID",
    measurementId: "MEASUREMENT-ID",
};

export default firebaseConfig;
Enter fullscreen mode Exit fullscreen mode

Data needs to be stored in the following format:

[
    {
        name: "CATEGORY NAME",
        items: [
            {
                desc: "PIZZA DESCRIPTION",
                id: "ID",
                img: "IMAGE LINK",
                name
Enter fullscreen mode Exit fullscreen mode

3. Weather Report App

A Weather Report App provides the user with current weather details and forecasts as well for the future.

This project is probably the easiest one on the list. You only need to use a third-party API like Open Weather Map or Weather API. It shows the viewer that you can work with external APIs.

Demo

Weather Man

GitHub logo ruppysuppy / The-WeatherMan-Project

🌞☁️ Get Local and International weather forecasts from the most accurate Weather Forecasting Technology featuring up to the minute Weather Reports.

THE WEATHER MAN PROJECT

This is a simple Django project which displays the weather details (current + forecast + previous) of any location in the world.

Resources Used

  • Google Places JavaScript API: For the place name auto-completion
  • Open Weather Maps API: For getting the weather details
  • Chart.js: For plotting the charts of previous data
  • AOS: For Animation on Scroll effect

How To Use

Follow the steps to start the local server on your machine:

  • Enter Your Google API Key (./templates/core/home.html) and Open Weather Maps API KEY (./weather_details/views.py). You receive the key after you make an account in the Google Cloud Platform (and Activate Google Places JavaScript API) and Open Weather Maps
  • Download and install Python 3.x
  • Navigate to the repository folder
  • Open the Terminal/CMD/PowerShell at the location (Shift + Right Click => Run Command Prompt/PowerShell for Windows or Right Click => Run Terminal for Linux based system)
  • Run the Command…

4. Cross-Platform App

Cross-Platform Applications are apps developed to function on multiple Operating Systems from the same code base.

Being well adapted at Cross-Platform Development is highly in demand these days as companies want to reduce the cost involved in application development, and what's a better way to do it than make an application once and use it on several platforms?

Demo

UnHook

GitHub logo ruppysuppy / SmartsApp

💬📱 An End to End Encrypted Cross Platform messenger app.

Smartsapp

A fully cross-platform messenger app with End to End Encryption (E2EE).

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Platforms Supported

  1. Desktop: Windows, Linux, MacOS
  2. Mobile: Android, iOS
  3. Website: Any device with a browser

Back-end Setup

The back-end of the app is handled by Firebase.

Basic Setup

  1. Go to firebase console and create a new project with the name Smartsapp
  2. Enable Google Analylitics

App Setup

  1. Create an App for the project from the overview page
  2. Copy and paste the configurations in the required location (given in the readme of the respective apps)

Auth Setup

  1. Go to the project Authentication section
  2. Select Sign-in method tab
  3. Enable Email/Password and Google sign in

Firestore Setup

  1. Go to the project Firestore section
  2. Create firestore provisions for the project (choose the server nearest to your location)
  3. Go to the Rules

GitHub logo ruppysuppy / UnHook

💻👨‍💻 Cross Platform Desktop App to remind you to Unhook yourself from the Screen.

UnHook

If you are one of the rare breed of people who call themselves programmers, you must have faced the following sitation:

You were so busy working, that you forgot to take a break while coding... now your eyes hurt due to the excessive stress on them.

The solution? Use UnHook, an app that helps you un-hook yourself from the screen by reminding you to take breaks at the right time.

Demo

Platforms

  1. Windows
  2. Linux
  3. MacOS

Tools/Frameworks Used

  1. Electron
  2. React
  3. Redux (This is an overkill for such a small app, its used for practicing redux + electron integration)

How to Use

  1. Download and go to the repository location.
  2. Install depenencies for main app using npm run install-dependencies
  3. Perform either of the following based on the development status of the app you are using
    • PRODUCTION (default): Use npm run build-front-end to build the react app
    • DEVELOPMENT: Use npm run start-front-end to…

5. Personal Portfolio

Since you just completed 4 projects mentioned above, you will definitely need a place to showoff how cool your projects are. Personal Portfolio is the go-to place to do just that, you can also list out your experience, achievements, and any other relevant information.

If you have a desire to build your personal brand, then a website that can promote your work is a must. This is just the place you can bring out your inner artist and design it to your heart's content. Not an artistic person? Draw ideas from templates or simply use one.

Demo

Portfolio

Web-app: https://tapajyoti-bose.vercel.app/

NOTE: This is by no means an exhaustive list; feel free to add your ideas in the comments below.

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

If you prefer reading the Spanish version of the article, you can check it out here: https://www.ibidem-translations.com/edu/traduccion-web-front-end/ (Credit: Agencia de traduccion Ibidem Group)

Thanks for reading

Want to work together? Contact me on Upwork

I am a student & freelancer who will soon start off as a Digital Nomad as soon as I graduate. Want to catch the journey? Follow me on Instagram

Follow my blogs for weekly new tidbits on Dev

Connect to me on:

Top comments (26)

Collapse
 
shadowruge profile image
izaias

Show, adoro tudo que aparece aqui, tenho uma ideia para fazer um modelo para kanbam mas não tenho ninguém para me ajuda(se alguém se propor eu aceito)

Collapse
 
ruppysuppy profile image
Tapajyoti Bose • Edited

I'm sorry but can't understand the language

Collapse
 
shadowruge profile image
izaias

Show, I love everything that appears here, I have an idea to make a kanban model but I don't have anyone to help me (if someone proposes, I accept)

Collapse
 
shadowruge profile image
izaias
Collapse
 
adri4no profile image
Adriano Valadares

Não entendi muito bem sua ideia. Mas parece interessante

Collapse
 
shadowruge profile image
izaias

criar um kanban com html, js, json é para ser bem simples de lidar, vou postar a ideia no github

Thread Thread
 
adri4no profile image
Adriano Valadares

Entendi, é tipo um Trello/Jira da vida, certo?! Sempre tive vontade de desenvolver um. Cara, se quiser posso te dar uma ajuda. Não garanto ser muita, mas posso no que for possível.

Thread Thread
 
shadowruge profile image
izaias

github.com/shadowruge
Pocha fico feliz obrigado

Collapse
 
shadowruge profile image
izaias
Collapse
 
larsejaas profile image
Lars Ejaas • Edited

Great article and some solid ideas. I sure learned a lot when I build my own personal portfolio page!
I visited your portfolio and really like it! Especially the effects where the articles "move/fade" in looks great!
Please check out my portfolio at larsejaas.com/en/

Collapse
 
giorgos profile image
GeorgeNeilyo

Mate honestly . One of the best portfolio's I ever seen. Well done!

Collapse
 
larsejaas profile image
Lars Ejaas

Thanks @georgeneilyo. It is just starting to be a bit outdated. I probably should give it an update soon 😀

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Wow! The micro interactions in you portfolio really blew me away! Amazing work!!!

Collapse
 
larsejaas profile image
Lars Ejaas

Thanks! I am glad you liked it 😊

Collapse
 
m133 profile image
M-133

what tecnolgy you used to do this???

Collapse
 
ruppysuppy profile image
Tapajyoti Bose • Edited

The projects?

Real-Time Chat App: react, redux, typescript & firebase (web app)
E-Commerce Store: react, redux & firebase
Weather Report App: Django (the one in the example is a full stack project)
Cross-Platform App: flutter & electron.js (flutter 2.0 & neutrino.js or tauri might be a better choice now)
Portfolio: react, redux, typescript, next.js & firebase

Collapse
 
amissah17 profile image
Frank Otabil Amissah

Another great project will be a link shortening app with react and bitly. I made a tutorial on building it. If you don't mind you can look it up from my profile.

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

I really like your Portfolio website and would like to make one for myself as well. Is there a github repo or a tutorial maybe then please share it. Thanks.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Thanks a lot. :)

I am planning to write an article on that the next week so stay tuned!

Collapse
 
chaderenyore profile image
chaderenyore

I don't like posts like this, they're click baits. since when did Django turn a frontend Language? Not a nice title but your projects are nice though

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Thankyou.

A weather report app is generally a front end project. As I had already mentioned, the one in the example is a full stack one

Collapse
 
chaderenyore profile image
chaderenyore

Okay great, thanks for the clarification

Collapse
 
jude_johnbosco profile image
Chinweike Jude Obiejesi

Would love to know if you have a GitHub repo for the portfolio

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

I do, but its private for some personal reasons. I'll be sharing how I made it the next week in great detail

Collapse
 
hassan_dev91 profile image
Hassan

thanks for offers

Collapse
 
wilsonmfreire profile image
Wilson Morais Freire

Bacanca as 5 idieas, pena que no git seria só a maneira de ver o pronto se tivesse passo a passo certamente tentaria acompanhar!

Vou fazer o meu por Portifólio Pessoal, obrigado pela dica.