I built a weekly planning app which utilized React and Redux for its frontend and a Rails API for its backend.
I decided to make an application which could be used as a short term planner or scheduler where the main events or activities of the immediate upcoming week could be entered. I figured that this was more relevant than a long term calendar style application for most scheduling/planning that one needs to actually carry out.
Although I do have long term plans outlined in document files or in notes on my phone, I usually need to make plans or schedule activities for more immediate upcoming events on a short term basis (a week or at most two weeks ahead) since plans are very frequently changed to adapt to changing circumstances or events that come up unexpectedly that need to be taken care of or resolved sooner.
I thought it would make sense to make an application which could handle this issue in a more organized and simple manner and with a more minimalist approach than keeping dozens of random disorganized notes in a note application for short term planning.
I decided that each event or activity needed to have a day it was assigned to, a location where it would occur, a name for the event, a description of the importance of the event (such as whether it was a low, medium, or high importance event), and a category for the event (such as whether it was about business, recreation, or was a creative activity for example).
I set up the Rails API backend for the application by navigating to the directory where I wanted to create the application and entering into the terminal the following command:
rails new planner --api
Then I set up the necessary migrations, models and controllers for the events and the categories that these activities belonged to.
I ran the migrations, then defined the models and the necessary methods for the controllers. Then I seeded the database with some example events. After this I moved all the files and folders except the README.md file into a new backend folder.
While in the uppermost folder, or root directory, of the application, I used the create-react-app generator to create a new React application in a new frontend folder:
npx create-react-app frontend
In the src folder in the frontend I created a components folder and then created presentation component files and container component files in that folder. Then I built out the presentation components and part of the container components for the application in JSX.
I then imported these components to the App.js file, and modified the App.css file to add some CSS styling. Next I installed React Router by running the following code while in the frontend folder:
npm install react-router-dom@5
This installed version 5 of React Router. I then imported BrowserRouter and Route into the index.js file and set up three different routes in the index.js file.
I then installed Redux in order to use it for state management by running the following commands in the terminal:
npm install redux
npm install react-redux
I also installed Redux Thunk in order to use it for asynchronous requests in my application with the following command:
npm install --save redux-thunk
From there I continued to build out and design the components of the project until it had the functionality and appearance I needed it to have for its use as a short term planner.
Top comments (0)