Giftodo: A React Native ToDo using Gifs

Description

Duration: Three days

Giftodo is a todo app for those who remember gifs better than words. Users can add new tasks (similar to most todo apps) with a name, description, priority, and due date and time. The twist lies therein that the user can also then add a randomly generated gif based on the name of the task. Users can click the generate button until they find a gif that they are satisfied with.

The bottom navigation bar allows users to navigate between four different views: a list of tasks, a list of tasks with gifs assigned to them (and this list displays each gif), the add task view (which becomes the edit task view when a user wants to edit a task), and the dedicated overdue view where users can immediately see which tasks are overdue.

All task lists can be sorted with a speed dial, and the sort can by ordered by priority, name, due date, and date added. Clicking the sort button again reverses the sort order.

I built this app in about three days during a Christmas holiday break. (Yes, I took some time off for the holidays too! Always a good thing to get some rest). The main reason for building this app was to explore working with React Native. (At the moment, the app was only tested on iPhone devices.)

The app uses a PostgreSQL database to on the back end, Express / Node.js as a server, and React Native with React Native Elements as a styling library on the front end. The app was initiated and run through Expo to allow testing on a simulator and on a native device. Gifs are generated by integration with the Giphy API.

Screenshots

Task List

Tasks in Gif view with sort speed dial.

Installation

1. After cloning this repository, set up a PostgreSQL database called react_native_todo on port 5432. You might want to use Postico as a GUI to help this setup process.
2. Use the commands in the database.sql file in the root directory of the project to set up the table in the database with some dummy data.
3. Run npm install to install dependencies in this project.
4. To use the Giphy API, you will have to be set up a Giphy API key, which can be done here, on the Giphy Developers page.
5. In the root directory of the project, set up a file called config.js and in this file add only the following lines, where the text in quotation marks should appear without quotation marks, but be the LOCALHOST ip address (e.g., 192.168.0.2) for the current computer and the Giphy API key generated on the Giphy Developers page in the previous step. Note that this localhost ip is not 127.0.0.1 but the external ip for the local host, because the phone / simulator has to connect to the local host computer (and not itself). The config.js file should be in the root directory; make sure that the .gitignore file includes a reference to this file (which it should if not altered) so as not to expose your api key should you upload to GitHub.

export const LOCALHOST_IP = 'ip_here';
export const GIPHY_API = 'giphy_api_key_here';

6. Run npm server start to start the server, which will run on port 5000.
7. Run expo start to start expo. Follow the instructions in the terminal to run the app on your phone or on a simulator on your computer. (Pressing i should open the app in the simulator.)On a Mac, Xcode should be installed to use the simulator.

Prerequisites

Before you get started, make sure you have the following software installed on your computer:

• Node.js
• PostgreSQL
• Xcode (for Mac)
• Nodemon

Built With

1. Node.js
2. Express
3. React Native
4. React Native Elements
5. PostgreSQL
6. axios
7. Expo
8. Giphy API

Acknowledgement

This app was built while I was studying at Prime Digital Academy during the Christmas break. The instruction I received there—and the general mindset of exploration—was very useful in building this app.