1. Notion clone
The Notion application is loved by many, it allows you to optimize your workflow, work with documents, schedule tasks, synchronize data between devices.
What you will learn by creating a Notion clone:
- . The user can "grab with the mouse" draggable element and place it in droppable zone.
- How to synchronize real-time data between a computer and a smartphone.
- We allow users to create, read, update and delete records, thus we train CRUD skills.
The article was translated with the support of EDISON Software, which and .
2. Repl.it clone
Repl.it is a real-time collaborative code editing tool. You can choose several languages: JavaScript, Python, Go and execute the code directly in the browser. Very useful for quick demos and code interviews.
What you will learn by creating a clone of Repl.it:
- How to run and execute code (server-side) in a browser (client-side).
- Read the input data (source code) and display the result of the execution on the screen.
- How to create files and folders on the web and save the results.
- How to highlight code syntax.
3. Clone Google Photos
Google Photos is a photo storage and sharing service.
Any modern photo application can perform basic functions: upload, crop, etc. People want to create their own avatars and share pictures of cats, so you need to be able to work with images.
What you will learn by creating a clone of Google Photos:
- How to create responsive images on phones, tablets, laptops and even giant TV screens.
- How to handle image uploads, especially large images (>1MB) and bulk uploads.
- Processing image files, cropping and resizing photos for thumbnails or when opening a gallery.
- Bonus: how to store images in the cloud or local database.
4. Gifsky clone
convert video to GIF using functions for efficient cross-frame palettes and temporal anti-aliasing. The result is a GIF with thousands of colors per frame.
What you will learn by creating a clone of Gifski:
- How to convert video files (.mp4 to .gif).
- How to use the HTML Drag and Drop API.
- How image optimization and processing work.
Note: and it's on GitHub!
5. Monitoring of cryptocurrency rates
React Native cryptocurrency tracker
What you will learn by creating a currency rate tracker:
- How to work with the API and get data remotely from the API.
- How to display data as a list.
- Bonus: If you're interested, I recently wrote to cryptocurrency with React Native.
Note: Here .
A selection of projects from previous publications.
Layer
Layer is a community where everyone can draw a pixel on a common "board". The original idea was born on Reddit. The r/Layer community is a metaphor for co-creation, that everyone can be a creator and contribute to a common cause.
What you will learn when creating your Layer project:
- How JavaScript canvas works, knowing how to operate canvas is a critical skill in many applications.
- How to coordinate user permissions (user permissions). Each user can draw one pixel every 15 minutes without having to log in.
- Create cookie sessions.
Squoosh
Squoosh is an image compression app with many advanced options.
Gif 20 mb
By creating your own version of Squoosh, you will learn:
- How to work with image sizes
- Master the Basics of the Drag'n'Drop API
- Understand how APIs and event listeners work
- How to upload and export files
Note: the image compressor is local. It is not necessary to send additional data to the server. You can have a compressor on your own, or you can on a server, of your choice.
Calculator
Come on? Seriously? Calculator? Yes, that's right, a calculator. Understanding the basics of mathematical operations and how they work together is a critical skill to simplify your applications. Sooner or later you will have to deal with numbers and the sooner the better.
By creating your own calculator, you will learn:
- Work with numbers and math operations
- Practice with the event listeners API
- How to arrange elements, understand the styles
Crawler (Search engine)
Everyone used a search engine, so why not create your own? Crawlers are used to search for information. Everyone uses them every day and the demand for this technology and specialists will only grow over time.
Google search engine
What will you learn by creating your own search engine:
- How crawlers work
- How to index sites and how to rank them by rating and reputation
- How to store indexed sites in a database and how to work with a database
Music player (Spotify, Apple Music)
Everyone listens to music - it's just an integral part of our lives. Let's build a music player to better understand how the basic mechanics of a modern music streaming platform work.
Spotify
What you will learn by creating your own music streaming platform:
- How to work with the API. use APIs from Spotify or Apple Music
- How to play, stop or rewind to the next/previous track
- How to change the volume
- How to manage user routing and browser history
Movie search app with React (with hooks)
The first thing you could start with is building a movie search app with React. Below is an image of what the final app will look like:
What will you learn
By building this application, you will improve your React skills using the relatively new Hooks API. The sample project uses React components, lots of hooks, an external API, and of course some CSS styling.
Tech stack and features
- React with hooks
- create-react-app
- JSX
- CSS
Without using any classes, these projects give you the perfect entry point into functional React and will definitely help you in 2020. you can find . Follow the instructions or make it your own.
Chat app with Vue
Another great project for you is to build a chat app using my favorite JavaScript library: VueJS. The application will look something like this:
What will you learn
In this tutorial, you'll learn how to make a Vue app from scratch - create components, handle states, create routes, connect to third-party services, and even handle authentication.
Tech stack and features
- View
- vuex
- vue router
- CLI view
- Pusher
- CSS
This is a really great project to get started with Vue or improve your existing skills to get into development in 2020. you can find .
Beautiful weather app with Angular 8
This example will help you build a beautiful weather app using Angular 8:
What will you learn
This project will teach you valuable skills in building applications from scratch - from design to development, all the way to a ready-to-deploy application.
Tech stack and features
- Angular 8
- Firebase
- Server Side Rendering
- CSS with Grid and Flexbox
- Mobile friendly and adaptability
- Dark mode
- Beautiful interface
What I really really like about this comprehensive project is that you don't study things in isolation. Instead, you learn the entire development process from design to final deployment.
To-Do app with Svelte
Svelte is like the new kid in the component approach - at least similar to React, Vue and Angular. And this is one of the hottest new products for 2020.
To-Do apps aren't necessarily the hottest topic, but they will really help you hone your Svelte skills. It will look like this:
What will you learn
This tutorial will show you how to create an application using Svelte 3, from start to finish. You will use components, styling and event handlers
Tech stack and features
- Slender 3
- Components
- Styling with CSS
- Syntax ES6
There aren't many good Svelte starter projects, so I found .
Ecommerce App with Next.js
Next.js is the most popular framework for building React apps that support server-side rendering out of the box.
This project will show you how to create an e-commerce application that looks like this:
What will you learn
In this project, you'll learn how to develop with Next.js—create new pages and components, retrieve data, and style and deploy a Next application.
Tech stack and features
- next.js
- Components and Pages
- Data sampling
- Stylization
- Project Deployment
- SSR and SPA
It's always great to have a real-life example like an e-commerce app to learn something new. You can .
Full multilingual blog with Nuxt.js
Nuxt.js is for Vue, like Next.js is for React: a great framework for combining server-side rendering and single-page applications
The last application you can create will look like this:
What will you learn
In this sample project, you'll learn how to build a complete website using Nuxt.js, from initial setup to final deployment.
It takes advantage of many of the cool features that Nuxt has to offer, such as pages and components, and styling with SCSS.
Tech stack and features
- Nuxt.js
- Components and Pages
- storyblock module
- Mixins
- Vuex for state management
- SCSS for styling
- Nuxt middlewares
, which includes many of the great features of Nuxt.js. I personally love working with Nuxt so you should give it a try as it will also make you a great Vue developer.
Blog with Gatsby
Gatsby is a great static site generator using React and GraphQL. This is the result of the project:
What will you learn
In this tutorial, you will learn how to use Gatsby to create a blog that you will use to write your own articles using React and GraphQL.
Tech stack and features
- Gatsby
- React
- GraphQL
- Plugins and Themes
- MDX/Markdown
- Bootstrap CSS
- Patterns
If you ever wanted to start a blog, how to make it using React and GraphQL.
I'm not saying WordPress is a bad choice, but with Gatsby you can build high performance websites using React - which is an amazing combination.
Blog with Gridsome
Gridsome for Vue… Okay, we already had that with Next/Nuxt.
But the same is true for Gridsome and Gatsby. Both use GraphQL as their data layer, but Gridsome uses VueJS. It's also an awesome static site generator to help you create great blogs:
What will you learn
This project will teach you how to create a simple blog to get started with Gridsome, GraphQL and Markdown. It also explains how to deploy an application through Netlify.
Tech stack and features
- Gridsome
- View
- GraphQL
- Markdown
- netlify
This is certainly not the most complete tutorial, but it covers the basic concepts of Gridsome and .
Audio player similar to SoundCloud using Quasar
Quasar is another Vue framework that can be used to build mobile apps. In this project, you will create an audio player application such as:
What will you learn
While other projects focus mostly on web apps, this one will show you how to build a mobile app using Vue and the Quasar framework.
You should already have a working Cordova with Android Studio/Xcode set up. If not, the manual has a link to the Quasar website where they show you how to set everything up.
Tech stack and features
- Quasar
- View
- Cordova
- wavesurfer
- UI Components
, demonstrating Quasar's capabilities for building mobile applications.
Credit card form
Cool credit card shape with smooth and nice micro-interactions. Includes number formatting, validation, and automatic card type detection. It is built on Vue.js and is also fully responsive. (You can see .)
What you will learn:
- Process and validate forms
- Handle events (for example, when fields change)
- Understand how to display and place elements on the page, especially credit card information that is on top of the form
bar chart
A bar chart is a chart or graph that represents categorical data with rectangular bars with heights or lengths proportional to the values they represent.
They can be applied vertically or horizontally. A vertical bar chart is sometimes called a line chart.
What you will learn:
- Display data in a structured and understandable way
- Optional: Learn how to use the element
canvasand how to draw elements with it
you can find world population data. They are sorted by year.
Twitter heart animation
Back in 2016, Twitter introduced this amazing animation for their tweets. As of 2019, it still looks decent, so why not create one yourself?
What you will learn:
- Work with CSS Attribute
keyframes - Manipulate and animate HTML elements
- Combine JavaScript, HTML and CSS
GitHub repositories with search functionality
There is nothing unusual here - the GitHub repositories are just a glorified list.
The goal is to display the repositories and allow the user to filter them. Use to get repositories for each user.
GitHub profile page
What you will learn:
- Get data from API
- Display data from API
- Filter and show relevant data for each search
- Optional: If you are ready to accept the call, use , created using GraphQL. .
Reddit style chats
Chats are a popular way to communicate due to their simplicity and ease of use. But what actually powers modern chat rooms? web sockets!
What you will learn:
- Use WebSockets, apply real-time communication and data updates
- Work with user access levels (for example, the owner of a chat channel has the role
adminand others in the roomuser) - Process and validate forms - remember, the chat box for sending a message is
input - Create and join different chats
- Work with private messages. Users can communicate with other users privately. Essentially, you will be establishing a WebSocket connection between two users.
Stripe style navigation
The uniqueness of this navigation is that the popover container transforms to fit the content. There is an elegance to this transition compared to the traditional behavior of opening and closing a new popover.
What you will learn:
- Combine CSS animations with transitions
- Shade content and apply active class to floating element
Pacman
Create your own version of Pacman. It's a great way to get an idea of how games are developed, to understand the basics. Use a JavaScript framework, React or Vue.
You will learn:
- How elements move
- How to determine which keys to press
- How to determine the moment of collision
- You can go further and add motion control for ghosts
An example of this project can be found GitHub
user management
Project GitHub
Creating a CRUD type application for user administration will teach you the basics of development. This is especially useful for novice developers.
You will learn:
- What is routing
- How to handle data entry forms and validate what the user has entered
- How to work with the database - create, read, update and delete actions
Checking the weather at your location
Project GitHub
If you want to create apps, start with a weather app. This project can be done using Swift.
In addition to gaining experience in creating an application, you will learn:
- How to work with the API
- How to use geolocation
- Make your application more dynamic by adding text input. In it, users will be able to enter their location to check the weather in a specific location.
You will need an API. To get weather data, use the OpenWeather API. More information about the OpenWeather API.
Chat window
My chat window in action, open in two browser tabs
Creating a chat window is the perfect way to get started with sockets. The choice of technical stack is huge. Node.js is great, for example.
You will learn how sockets work and how to implement them. This is the main advantage of this project.
If you are a Laravel developer who wants to work with sockets, please read my
GitLab CI
If you are new to continuous integration (CI), play around with GitLab CI. Set up a few environments and try running a couple of tests. It's not a very difficult project, but I'm sure you'll learn a lot from it. Many development teams are currently using CI. Knowing how to use it is useful.
You will learn:
- What is GitLab CI
- How to configure
.gitlab-ci.ymlwhich tells the GitLab user what to do - How to deploy to other environments
Website Analyzer
Make a scraper that analyzes the semantics of websites and creates their rankings. For example, you can check for missing alt tags on images. Or check if the page has SEO meta tags. Scraper can be created without a user interface.
You will learn:
- How the scraper works
- How to create DOM selectors
- How to write an algorithm
- If you don't want to stop there, create a user interface. You can also create a report for each website you check.
Determining Social Media Sentiment
Determining social media sentiment is a great way to get familiar with machine learning.
You can start by analyzing just one social network. Usually everyone starts with Twitter.
If you already have experience with machine learning, try to collect data from different social networks and combine them.
You will learn:
- What is machine learning
Trello clone
What you will learn:
- Organization of request processing routes (Routing).
- drag and drop.
- How to create new objects (boards, lists, cards).
- Processing and validation of input data.
- From the client side: how to use local storage, how to store data in local storage, how to read data from local storage.
- From the server side: how to use databases, how to store data in the database, how to read data from the database.
made with React+Redux.
admin panel
A simple CRUD app, perfect for learning the basics. Let's learn:
- Create users, manage users.
- Interact with the database - create, read, edit, delete users.
- Input validation and work with forms.
Cryptocurrency tracker (native mobile app)
Anything: Swift, Objective-C, React Native, Java, Kotlin.
We study:
- How native apps work.
- How to retrieve data from API.
- How native page layouts work.
- How to work with mobile simulators.
. Find better - write in the comments.
If interested, here .
Set up your own webpack config from scratch
Technically, this is not an application, but a very useful task to understand how webpack works from the inside. Now it will not be a "black box", but an understandable tool.
Requirements:
- Compile es7 to es5 (basics).
- Compile jsx to js - or - .vue to .js (you'll have to learn loaders)
- Set up webpack dev server and hot module reloading. (vue-cli and create-react-app use both)
- Use Heroku, now.sh or Github, learn how to deploy webpack projects.
- Set up your favorite preprocessor to compile css - scss, less, stylus.
- Learn how to use images and svgs with webpack.
Hackernews clone
Every Jedi is required to make their own Hackernews.
What you will learn along the way:
- How to interact with the hackernews API.
- How to create a single page application.
- How to implement such features as viewing comments, individual comments, profiles.
- Organization of request processing routes (Routing).
Tudushechka
Seriously? Tudushka? There are thousands of them. But believe me, there is a reason for such popularity.
The Tudu app is a great way to make sure you understand the basics. Try writing one application in vanilla Javascript and one in your favorite framework.
Learn:
- Create new tasks.
- Check field completion.
- Filter tasks (completed, active, all). Use
filterиreduce. - Understand the basics of Javascript.
Sortable drag and drop list
Very helpful to understand .
Let's learn:
- Drag and Drop API
- Create rich UIs
Messenger clone (native app)
You will understand how both web applications and native applications work, which will set you apart from the gray mass.
What we will study:
- Web sockets (instant messaging)
- How native apps work.
- How templates work in native applications.
- Organization of request processing routes in native applications.
Word processor
The purpose of a text editor is to reduce the effort of users trying to convert their formatting to valid HTML markup. A good text editor allows users to format text in different ways.
Everyone has used a text editor at some point. So why not ?
Reddit clone
is a social news aggregation, web content rating and discussion site.
Reddit - takes up most of my time, but I continue to hang on it. Creating a Reddit clone is an effective way to learn how to code (while browsing Reddit).
Reddit provides you with a very rich. Don't miss out on any features and don't do it haphazardly. In the real world with clients and customers, you won't be able to work randomly, or you'll quickly lose your job.
Smart customers will immediately guess that the work is being done badly and will find someone else.
Publishing an Open Source NPM Package
If you're writing Javascript code, chances are you're using a package manager. The package manager allows you to reuse existing code that other people have written and published.
Understanding the full package development cycle will give a very good experience. There are many things you need to know when posting code. You need to think about security, semantic versioning, scalability, naming conventions, and maintenance.
The package can be anything. If you don't have an idea, create your own Lodash and publish it.
lodash:
Having something you made online puts you 10% above others. about open sources and packages.
FreeCodeCamp Curriculum
freeCodecamp has put together a lot .
freeCodeCamp is a non-profit organization. It consists of an interactive web learning platform, an online community forum, chat rooms, Medium posts, and local organizations that intend to make learning web development accessible to everyone.
You will be more than qualified for your first job if you manage to complete the entire course.
Create an HTTP Server from Scratch
The HTTP protocol is one of the main protocols by which content gets on the Internet. HTTP servers are used to serve static content such as HTML, CSS, and JS.
Being able to implement the HTTP protocol from scratch will expand your knowledge of how everything interacts.
For example, if you are using NodeJs, then you know that Express provides an HTTP server.
For reference, see if you can:
- Set up a server without using any libraries
- The server must serve HTML, CSS and JS content.
- Implementing a router from scratch
- Monitor changes and update the server
If you don't know why, use and try to create a http server from scratch.
Desktop application for notes
We all take notes, right?
Let's create a note taking app. The application needs to save notes and synchronize them with the database. Build a native app with Electron, Swift, or whatever you like and suits your system.
Feel free to combine this with the first challenge (text editor).
As a bonus, try syncing the desktop version with the web version.
Podcasts (Overcast clone)
Who doesn't listen to podcasts?
Create a web application with the following features:
- Create an account
- Search for podcasts
- Rate and subscribe to podcasts
- Stop and play, speed change, forward and backward functions for 30 seconds.
Try using the iTunes API as a starting point. If you know of any other resources, write in the comments.
Screen capture
Hello! I'm filming my screen right now!
Create a desktop or web application that will allow you to capture your screen and save the clip as .gif
Here how to achieve this.
Sources of
Source: habr.com