Serenity-Now - An app to manage memorable vacations and time off work

This project showcases all I've learnt in React-Native. By using the guidance of a few videos I've watched and docs, articles I've read, I built this app, with slick animations and a slick UI with buttery smooth animations.

Screenshots and GIFs

Use the username - [email protected] and password - test1234, to login. I didn't implement a signup functionality, coz I was too lazy lol.

Videos demonstrating the app's UX Design and userflow.

The Introduction to the App's UI, various tours and React Native Components.

The App's Fresh Look

Infinite Looping Stackable Cards with Pan Gesture Control with Micro-Interactions.

Stackable Gesture Controlled Cards

User Authentication Flow with Firebase and Lottie Animations.

Lottie Animations and Authentication

Technologies used

• React Native (Expo) - The base framework for building the app, using the Expo CLI and Metro Bundler.
• Redux Toolkit - A library for managing state in React Native throughout the application, which is much easier to use than the built-in React Native state management and Native Redux.
• GraphQL using the Apollo Client - A GraphQL client for React Native, which is used to fetch data from the Contentful CMS.
• React Navigation - To manage the various screens and tabs in the app.
• Contentful CMS - Content Management System - To store and manage the data for the app.
• Async Storage - For persisting data across sessions.
• Firebase for Authentication - To authenticate the user
• Lottie Animations using the AirBnb React Native Lottie library - To create the slick and fun animations for the app.
• Styled Components - To style React Native components, using SCSS.
• Random User API - To generate random users for the app.

Features

• React Native Animations and Transitions using the Animated library and Lottie Animations.
• React Native Modals
• Stackable and Pannable cards, using the PanResponder and Animated libraries.
• Gesture Control for the cards, using the PanResponder and Animated libraries.
• Beautiful UI and Animations
• Persistent Data Storage and Retreival
• Authentication using Firebase
• SVG Icon Components
• Complex State Management using Redux Toolkit
• Dynamic Data using GraphQL and Contentful CMS
• Multiple Screens and Tabs

How to run

1. Either download the APK available in the repo and run it on Android devices. IOS devices are not fully supported yet.
2. Second way, is to run the app on your computer using the Expo CLI. You can find the instructions here.
   • Install Expo CLI
   • Clone the repo
   • Run npm install to install the dependencies.
   • Run npm start to start the app.