Do not kill your motivation: learn Ruby on Rails with interesting examples
Still, they remember how it happens: you learn something new, but suddenly you just become depressed. Why all? Because the development of standard applications for learning is boring to the gnashing of teeth.
Such tasks become the KILLERS of motivation β1.
Personally, I do not want my students to lose their motivation and give up halfway. So I created this kilometer list of 27 fun ideas for apps that you can create while you are learning to use React for a couple of Ruby on Rails.
')
This list assumes that you already feel quite comfortable when working with Ruby on Rails (or with some other framework for web development). Therefore, the part relating to the backend may seem rather complicated to beginners, but here the front end should not cause serious difficulties.
Project # 1 - Calendar Scheduler (like Google Calendar)
You can start this project as the simplest application that you will gradually improve by adding more features and improving the UX.
This will help you practice working with nested components (such as the component of the day placed in the component of the week, which in turn is located in the component of the month).
I use a similar application as an example in my free course for Rails developers .
You can see the full step-by-step version of the code here .
Project # 2 - Search engine for interesting code repositories on Github
You can make it so that the search is performed on the client side, but it will be much more interesting if you store search queries in the database using Rails and display the most popular ones.
Such a project is a good practice in using external APIs and working with JSON responses. You can also experiment with pre-rendering the component on the server.
Check out this Algolia plugin for some fresh ideas.
Project β3 - Application for notes
You will be able to fully appreciate the capabilities of React when dealing with numerous state changes - say, if you connect autosave. Explore Simplenote if you need an example of a simple but powerful note taking application.
If it seems to you that for the first project itβs complicated, you can first practice with the external text editing component to understand how it all works, and then implement your own.
Project β4 - Add Slack chat to your website
Use the react-slack-chat component to add a chat widget to an existing Rails site. The component will do most of the work for you, but you can have fun by creating your own Rails bot or playing with the widget's React settings.
The component code is available on Github .
Project # 5 - Memes Generator
Rails allows you to maintain the storage and maintenance of a library of images and cool memes. Use React to render and control the form to create a meme.
You can create a meme on the server using ImageMagick or in a browser using canvas. Check out this Hung Tran repository .
Project β6 - Application for finding free images in real time
Use API from Unsplash as a source of free images of excellent quality.
Add cool animations with React Animation Add-Ons .
Give users the ability to add favorite images to their favorites. You can experiment: make a simple backend for the Rails application's API, and create a separate application for React for the frontend.
Project β7 - Readers Club
A simple application in which you can discuss your favorite books and share them with friends (something like Goodreads ). The backend can be run as a simple Rails CRUD application, and the front end as a one-page React application, playing along with Router and Redux at the same time.
Project β8 - Web client for managing multiple Twitter accounts (in the spirit of Tweetdeck)
A web client for Twitter, which can be linked to multiple accounts (using OAuth), and then add to its interface multiple columns to display different screens - tapes, alerts, search, and correspondence.
We recommend using this irreplaceable Twitter gem from Erik Michaels-Ober .
With it, you will experience the incomparable pleasure that the developer brings from ludicrous API requests from the most loyal company in the world.
You can also enter automatic uploading of new tweets and alerts, as in Tweetdeck, using polling or Action Cable.
Here, too, there are enough embedded components and there is an opportunity to try to implement simple animations on React.
Perhaps the best place to start is to limit the reading function. When you deal with it, you can connect other options - posting, likes, retweets.
Project β9 - OpenStreetMap with custom UI
Did you know that the OpenStreetMap website is an application written in Rails?
Follow the link to find a repository, install it on your device and work with the frond using React!
Project β10 - Russian roulette with meals for the whole team.
A website that will help the team decide where to go today for lunch. In terms of the backend, a CRUD application is sufficient, which gives your colleagues the opportunity to offer various establishments. You can use the Foursquare API for search and auto-complete functions. And React allows you to add cool animations!
If the idea of ββlunch does not appeal to you, organize a coffee break in this way, or go to the bar after work, or something more interesting.
Project β11 - Master procrastination
Everything you need to take time off from work is on one website. Read posts from Reddit, Hacker News, Product Hunt, Medium, Slashbot, and so on without switching.
Use the Rails backend to save user accounts and preferences, as well as to communicate with different APIs. Another option is to receive data from the API directly from the client.
Project β12 - Chat with Action Cable
This is not only a reason to learn Rails, but also a great opportunity to try Action Cable - an interesting feature from Rails 5 that provides support for WebSocket on Rails. For starters, you can read these examples .
Project β13 - Medium Clone
Read a series of posts from the Andrea Mazzini blog in which he talks in detail about the process of creating a Medium clone using the Rails API application, React and Flux.
You can do without Flux, but if you want to complicate your task a little, it makes sense to connect it.
Project β14 - Face tagger
An application that allows you to upload photos and mark users on them (like on Facebook). For automatic face recognition, use the OpenCV Ruby gem by reference.
Project β15 - ActiveAdmin on steroids
You probably used ActiveAdmin to track the process of working on the application. But the interface is, frankly, so-so. You can fix this by turning one screen after another into React's stylized components.
You can learn the ActiveAdmin code here .
Project β16 - Brexit Store
React on Rails offers visitors jam, beer, English flags, curry and more. If you do not want to implement the functions needed for the store, on Rails, use Spree , and focus on using React components when working on the frontend.
Project β17 - Just mail and no chimps
Mail client with a good interface, from which the user does not want to tear his hair. And without all sorts of nonsense there, like pretty little monkeys.
The Mailchimp API will nevertheless fit you. Alternatively, you can contact Sendgrid as an alternative. If you have worked with Mailchimp, then you know yourself that there are functions you can try to implement, mass β viewing, filters, managing subscribers, creating forms and campaigns, and so on.
Choose one and try to implement it. Most of the functions imply the presence of some form, so this is your chance to practice dividing the interface into React components that display state changes and functional components that are not related to the state.
Project 18 - Gmail on Rails
The Gmail interface is very complicated, but you can start with just creating a UI for displaying a list of letters and reading. Or maybe for a search, if you're more interested?
Take advantage of this Gmail API for Gmail , as well as the tutorial and code repository from Mark Brown to make it easier to get started.
Project β19 - DJ Spotify
DJ application based on Spotify . Get recommendations, create and mix playlists and even let others add songs to your playlists.
Use the Ruby wrapper gem to get the Spotify API.
I once made a little application with it, and working with it was quite simple. Spotify allows you to play music only through its own application, so you have to run it in parallel with yours.
Project β20 - Heroku Panel
As a Rails developer, you are most likely very familiar with Heroku . This is a great service for quickly deploying and hosting Rails applications β especially well suited when you are working on many small projects just to get your hands on it.
Create a simple panel that will group your applications into a list and allow you to quickly display key information about each of them. The next step is to add an editing function.
Use this gem to access the Heroku API.
Project β21 - AWS S3 client
Make a nice modern interface to manage your AWS S3 account
Use the Ruby gem link and start by creating a simple file management component. Then add a form component to upload files.
Project β22 - Stripe analytics panel
A panel that shows statistics and graphs created from Striple data. This API has excellent documentation , and in addition you will have the opportunity to try using D3 with React (see here and here ).
Project β23 - Analytics Panel
In its original form, the Google web analytics dashboard is too overloaded and difficult to read. You can make a simpler version, which will display only the most important information.
Another opportunity to try out the D3. Or refer to another library . You can get the analytics API with this gem .
Project β24 - Application for tracking habits
Develop an application to keep track of your daily and weekly activities - morning gatherings, gym visits, jogging, cooking, meditation, playing the guitar, tea ceremonies. You can be inspired by Loop Habit Tracker or Coach .
Adapt your mobile app so you can use it on the go. When you make friends with React, you can even make a mobile application using React Native.
Project β25 - Fitness panel
Create a dashboard with your personal fitness data that collects information from different applications and displays useful statistics on a nice interface.
You can easily receive data from a variety of APIs, depending on what services you and your loved ones use - Fitbit , Google Fit , Moves , Runkeeper , Strava , Withings and so on.
You can even allow the user to manually enter some simple information such as changes in weight or exercise regimen.
It is better to start simply with the output of reports, and then improve the panel by adding new features, such as the ability to take notes or share the results.
Project β26 - Guess what I drew (play)
Create a drawing application in which you want to draw with a mouse so that your friend guesses what kind of Malyaka you have painted. You can use canvas to draw. See an example from Michal SvrΔek to see where to start.
Use Rails to load and save drawings, and then show them to someone on another device. Or even more fun: plug in machine learning and let your computer guess. ;)
Project # 27 - You write as ...
Make an application for the classification of texts that compares your style with the style of a famous author - just like the application I Write Like (created by Dimitri Honest ).
Use classifier-reborn for classification and React to work with the form. The main difficulty here is in the backend, so experiment with different UI animations . Check out this repository for some cool ideas.
Now you have a whole list of interesting ideas to upgrade your skills in React, in the process of mastering Rails!
Such tasks become the KILLERS of motivation β1.
Personally, I do not want my students to lose their motivation and give up halfway. So I created this kilometer list of 27 fun ideas for apps that you can create while you are learning to use React for a couple of Ruby on Rails.
')
This list assumes that you already feel quite comfortable when working with Ruby on Rails (or with some other framework for web development). Therefore, the part relating to the backend may seem rather complicated to beginners, but here the front end should not cause serious difficulties.
Project # 1 - Calendar Scheduler (like Google Calendar)
You can start this project as the simplest application that you will gradually improve by adding more features and improving the UX.
This will help you practice working with nested components (such as the component of the day placed in the component of the week, which in turn is located in the component of the month).
I use a similar application as an example in my free course for Rails developers .
You can see the full step-by-step version of the code here .
Project # 2 - Search engine for interesting code repositories on Github
You can make it so that the search is performed on the client side, but it will be much more interesting if you store search queries in the database using Rails and display the most popular ones.
Such a project is a good practice in using external APIs and working with JSON responses. You can also experiment with pre-rendering the component on the server.
Check out this Algolia plugin for some fresh ideas.
Project β3 - Application for notes
You will be able to fully appreciate the capabilities of React when dealing with numerous state changes - say, if you connect autosave. Explore Simplenote if you need an example of a simple but powerful note taking application.
If it seems to you that for the first project itβs complicated, you can first practice with the external text editing component to understand how it all works, and then implement your own.
Project β4 - Add Slack chat to your website
Use the react-slack-chat component to add a chat widget to an existing Rails site. The component will do most of the work for you, but you can have fun by creating your own Rails bot or playing with the widget's React settings.
The component code is available on Github .
Project # 5 - Memes Generator
Rails allows you to maintain the storage and maintenance of a library of images and cool memes. Use React to render and control the form to create a meme.
You can create a meme on the server using ImageMagick or in a browser using canvas. Check out this Hung Tran repository .
Project β6 - Application for finding free images in real time
Use API from Unsplash as a source of free images of excellent quality.
Add cool animations with React Animation Add-Ons .
Give users the ability to add favorite images to their favorites. You can experiment: make a simple backend for the Rails application's API, and create a separate application for React for the frontend.
Project β7 - Readers Club
A simple application in which you can discuss your favorite books and share them with friends (something like Goodreads ). The backend can be run as a simple Rails CRUD application, and the front end as a one-page React application, playing along with Router and Redux at the same time.
Project β8 - Web client for managing multiple Twitter accounts (in the spirit of Tweetdeck)
A web client for Twitter, which can be linked to multiple accounts (using OAuth), and then add to its interface multiple columns to display different screens - tapes, alerts, search, and correspondence.
We recommend using this irreplaceable Twitter gem from Erik Michaels-Ober .
With it, you will experience the incomparable pleasure that the developer brings from ludicrous API requests from the most loyal company in the world.
You can also enter automatic uploading of new tweets and alerts, as in Tweetdeck, using polling or Action Cable.
Here, too, there are enough embedded components and there is an opportunity to try to implement simple animations on React.
Perhaps the best place to start is to limit the reading function. When you deal with it, you can connect other options - posting, likes, retweets.
Project β9 - OpenStreetMap with custom UI
Did you know that the OpenStreetMap website is an application written in Rails?
Follow the link to find a repository, install it on your device and work with the frond using React!
Project β10 - Russian roulette with meals for the whole team.
A website that will help the team decide where to go today for lunch. In terms of the backend, a CRUD application is sufficient, which gives your colleagues the opportunity to offer various establishments. You can use the Foursquare API for search and auto-complete functions. And React allows you to add cool animations!
If the idea of ββlunch does not appeal to you, organize a coffee break in this way, or go to the bar after work, or something more interesting.
Project β11 - Master procrastination
Everything you need to take time off from work is on one website. Read posts from Reddit, Hacker News, Product Hunt, Medium, Slashbot, and so on without switching.
Use the Rails backend to save user accounts and preferences, as well as to communicate with different APIs. Another option is to receive data from the API directly from the client.
Project β12 - Chat with Action Cable
This is not only a reason to learn Rails, but also a great opportunity to try Action Cable - an interesting feature from Rails 5 that provides support for WebSocket on Rails. For starters, you can read these examples .
Project β13 - Medium Clone
Read a series of posts from the Andrea Mazzini blog in which he talks in detail about the process of creating a Medium clone using the Rails API application, React and Flux.
You can do without Flux, but if you want to complicate your task a little, it makes sense to connect it.
Project β14 - Face tagger
An application that allows you to upload photos and mark users on them (like on Facebook). For automatic face recognition, use the OpenCV Ruby gem by reference.
Project β15 - ActiveAdmin on steroids
You probably used ActiveAdmin to track the process of working on the application. But the interface is, frankly, so-so. You can fix this by turning one screen after another into React's stylized components.
You can learn the ActiveAdmin code here .
Project β16 - Brexit Store
React on Rails offers visitors jam, beer, English flags, curry and more. If you do not want to implement the functions needed for the store, on Rails, use Spree , and focus on using React components when working on the frontend.
Project β17 - Just mail and no chimps
Mail client with a good interface, from which the user does not want to tear his hair. And without all sorts of nonsense there, like pretty little monkeys.
The Mailchimp API will nevertheless fit you. Alternatively, you can contact Sendgrid as an alternative. If you have worked with Mailchimp, then you know yourself that there are functions you can try to implement, mass β viewing, filters, managing subscribers, creating forms and campaigns, and so on.
Choose one and try to implement it. Most of the functions imply the presence of some form, so this is your chance to practice dividing the interface into React components that display state changes and functional components that are not related to the state.
Project 18 - Gmail on Rails
The Gmail interface is very complicated, but you can start with just creating a UI for displaying a list of letters and reading. Or maybe for a search, if you're more interested?
Take advantage of this Gmail API for Gmail , as well as the tutorial and code repository from Mark Brown to make it easier to get started.
Project β19 - DJ Spotify
DJ application based on Spotify . Get recommendations, create and mix playlists and even let others add songs to your playlists.
Use the Ruby wrapper gem to get the Spotify API.
I once made a little application with it, and working with it was quite simple. Spotify allows you to play music only through its own application, so you have to run it in parallel with yours.
Project β20 - Heroku Panel
As a Rails developer, you are most likely very familiar with Heroku . This is a great service for quickly deploying and hosting Rails applications β especially well suited when you are working on many small projects just to get your hands on it.
Create a simple panel that will group your applications into a list and allow you to quickly display key information about each of them. The next step is to add an editing function.
Use this gem to access the Heroku API.
Project β21 - AWS S3 client
Make a nice modern interface to manage your AWS S3 account
Use the Ruby gem link and start by creating a simple file management component. Then add a form component to upload files.
Project β22 - Stripe analytics panel
A panel that shows statistics and graphs created from Striple data. This API has excellent documentation , and in addition you will have the opportunity to try using D3 with React (see here and here ).
Project β23 - Analytics Panel
In its original form, the Google web analytics dashboard is too overloaded and difficult to read. You can make a simpler version, which will display only the most important information.
Another opportunity to try out the D3. Or refer to another library . You can get the analytics API with this gem .
Project β24 - Application for tracking habits
Develop an application to keep track of your daily and weekly activities - morning gatherings, gym visits, jogging, cooking, meditation, playing the guitar, tea ceremonies. You can be inspired by Loop Habit Tracker or Coach .
Adapt your mobile app so you can use it on the go. When you make friends with React, you can even make a mobile application using React Native.
Project β25 - Fitness panel
Create a dashboard with your personal fitness data that collects information from different applications and displays useful statistics on a nice interface.
You can easily receive data from a variety of APIs, depending on what services you and your loved ones use - Fitbit , Google Fit , Moves , Runkeeper , Strava , Withings and so on.
You can even allow the user to manually enter some simple information such as changes in weight or exercise regimen.
It is better to start simply with the output of reports, and then improve the panel by adding new features, such as the ability to take notes or share the results.
Project β26 - Guess what I drew (play)
Create a drawing application in which you want to draw with a mouse so that your friend guesses what kind of Malyaka you have painted. You can use canvas to draw. See an example from Michal SvrΔek to see where to start.
Use Rails to load and save drawings, and then show them to someone on another device. Or even more fun: plug in machine learning and let your computer guess. ;)
Project # 27 - You write as ...
Make an application for the classification of texts that compares your style with the style of a famous author - just like the application I Write Like (created by Dimitri Honest ).
Use classifier-reborn for classification and React to work with the form. The main difficulty here is in the backend, so experiment with different UI animations . Check out this repository for some cool ideas.
Now you have a whole list of interesting ideas to upgrade your skills in React, in the process of mastering Rails!
Source: https://habr.com/ru/post/321316/
All Articles