dhnazarenko/timeonation

Timeonation

Timeonation is a donation app that lets you do good by simply taking some time, choosing a project and watching a promotional video. The reward is a donation to the selected project.

Demo

Heroku

This app was programmed for mobile view. For a better view in your browser, open the development tools and switch there to the mobile view. Preferably in the format of an iPhone 6/7/8.

Installing / Getting started

To start the project do the following.

npm install
npm start

Start Storybook.

npm run Storybook

Developing

Built With

React

Tech Stack

• React
• React Router
• TypeScript
• MongoDB
• Express.js
• Node.js
• Storybook
• External API

Api Reference

Betterplace API

timeonation's Issues

Project Card Component

Screenshots

Tasks

• Project image
• Project title
• Project donation information
• Organization logo

Login Function

• Check user data is available
• forward to the start page if available

Fetch API

Description

betterplace.org API : https://github.com/betterplace/betterplace_apidocs

• Fetch betterplace.org API and get project by id
• Test get project by id

Forgot Password Page

User Story

As a user,
i want to see a forgot password page where i can reset my password

Screenshots

Tasks

• Backlink to login page
• Headline
• Introduction text
• Input field e-mail
• Reset password button

Category Card Component

Screenshots

Tasks

• Category title
• Shadow

Profil Page

User Story

As a User,
i want a profile page with an overview of my data and information
about my donations and views. A logout function would also be good.
At the end of the page i would like a navigation to switch between the main pages.

Screenshots

Tasks

• Headline with name of the user
• Profile picture
• User information
• Logout button
• Navbar

Add Main Page Functionality

• Map projects
• Map categories

Video Button Component

Screenshots

Tasks

• Dynamic colors
• Video Icon on the left
• text on the right

Avatar Image Component

Screenshots

Tasks

• Build avatar component with dynamic image source

User Information Component

Screenshots

Tasks

• Add a single component headline and placeholder text with border on bottom
• Build full component user information

Details Page

User Story

As a User,
i would like to see a project contribution with a small overview of the donation details.
The project should include a cover image, title and description. I would
like a link at the end of the page to the donation video and the possibility to share the project

Screenshots

Tasks

• Project image
• Project title
• Overview details
• Description
• Share button
• Video button

Add Modal for Video

• Add modal
• Implement video from YT
• Add close button

Primary Button Component

Screenshots

Tasks

• Build button component for Login, Register and Reset password page
• Placeholder text

Back Button Component

Screenshots

Tasks

• Use SVG icon

Main Page

User Story

As a User,
i would like to have an overview of the most popular projects and a
selection of the categories. At the end of the page i would like a navigation
to switch between the main pages.

Screenshots

Tasks

• Headline
• Profile picture
• Popular projects cards
• Headline
• Categories card
• Navbar

Register Page

User Story

As a user,
i want to see a registration page where I can enter my details to register.
If i have forgotten my password i want to request it again

Screenshots

Tasks

• Backlink to login page
• Headline
• Input field username
• Input field e-mail
• Input field password
• Input field confirm password
• Register button
• Forgot password link

Add Global Styles and Title

Tasks

• Add global styles
• Add global colors
• Add title

Login Page

User Story

As a User,
i would like to see a login page where I can enter my username and
password and then come to the "start page".

Screenshots

Tasks

• Welcome text
• Login text
• Input field E-mail
• Input field Password
• Login Button
• Sign up link

Navigation Bar Component

Screenshots

Tasks

• Add links & Icons Home, Search, User
• Add animation on active

Search Page

User Story

As a User,
i would like to have a function in which I can filter by categories and locations or search for terms of my own. These should then be listed with the main information. At the end of the page i would like a navigation
to switch between the main pages.

Screenshots

Tasks

• Headline
• Input field filer categories
• Input field filter locations
• Input field search
• list Project cards with main information
• Navbar

Details Information Card Component

Input Field Component

Screenshots

Tasks

• Icon on the left
• Placeholder text on the right