PlantManager is a project to help you take care of your plants and remind you with notifications the exact time to water your plants!
The project was developed during the fifth edition of Next Level Week, held by Rocketseat between April 19th and 23th, 2021.
- Welcome Splash Screen
- Loading screen using Lottie animation by JSON file
- Input name to identify the user
- List of Plants and filters categories of which place of your home is recommended to put your favorite plant
- Pagination feature to limit 8 plants per view
- Schedule the best time to water your plants
- Remove an appointment by Swipe gesture
- Expo Notifications to remember you when to water your plants
- AsyncStorage to save all your appointments locally
- Menu using React Navigation Tabs
The application was developed with Typescript using the framework ReactJS and Expo.
The main libs use in this application was React Native AsyncStorage to save the appointments locally, React Navigation to control routes and tabs feature, Expo Notifications to make sure all the notifications will appear properly. Also, Lottie React Native was used for loading effects with JSON file animation.
Clone the repository:
$ git clone https://github.com/paulo-carvalho93/plantmanager.git
You need JSON-SERVER installed globally on your machine to get all the information from a fake backend. Follow the instructions below:
# Install JSON-SERVER
# Use one of the commands below depending which package manager you have.
# YARN
$ yarn global add json-server
# NPM
$ npm install -g json-server
After that, you just need to put the IP Address of your machine at api.ts:
$ baseURL: 'http://YOUR_API_ADDRESS:3333'
Here, I'm assuming that you have Android/Iphone Emulator and Expo app is installed. You can also use your smartphone, just download the EXPO app and read the QR code that is shown on Expo Dashboard.
# Start JSON-SERVER
$ json-server ./src/services/server.json --host YOUR_API_ADDRESS --port 3333 --delay 700
# Start project
$ expo start