Light

ronjameinecke / good-thanks-app Goto Github PK

View Code? Open in Web Editor NEW

12.0 1.0 1.0 1.52 MB

This is the "good thanks." app which will primarily focus on habit tracking and creating new routines to improve your life so that your future answer to the question "how are you?" will always be "good thanks." 😊

Shell 0.26% JavaScript 0.66% CSS 8.53% TypeScript 90.55%

good-thanks-app's Introduction

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

good-thanks-app's People

Contributors

Stargazers

Watchers

Forkers

good-thanks-app's Issues

update links

update links between pages

add home page header

add navigation header for home page
• add background svg
• import logo component as home button

dynamic logo component

the logo component is part of many pages in my app. The background color and text is dynamic.

examples:

add burger menue component

add burger menue svg to use in header on home page and user page

add MongoDB

add MongoDB to store the user data

add burger menue component

add burger menue svg to use in header on home page and user page

create login page

create login page for returning users
• add login component
• add header logo
• add link to sign up
• add link forgot password

add user icon component

the user icon will appear in the header of the home page and the header of the user page

create start page

build start screen out of components #7 #6 and add a link to the login page.

create sign up component

after clicking the get started button the user is asked to sign up
The component consists out of:
• 4 input fields
• a background svg
• a headline
• sign up button
• an optional sign in link (for users that are already signed up)

create login component

create a login page for users that already have an account.

the component has:
• a SVG as a backdrop
• headline "welcome back"
• form
• 2 input fields
• 1 button to send the form

add buttons

acceptance criteria

create burgerMenu overlay component

the function will be: when the burger button icon is clicked by the user an overlay will slide in from the right with the menu. By clicking the XButton the menu will slide out again.

overlay component:
• import XButton
• add background organic form
• add H1
• add list
• add search icon

add X-Button component

add x-Button component for the user to close the burger menu and other overlays throughout the app

add splash screen component

create splash screen for the user to feel welcomed and get familiar with the corporate identity by showing fonts and the logo.
the logo is part of #6

create signUp page

create sign up page for users to create account
• add signUp component
• add header logo component
• add sign in link

create header component for Home page

create header component on Home page of the app for user to navigate

• import header
• import logo component and add to header
• add user icon
• add burger menu icon

update Readme

create home page

create the home page the user is lead to after the index page

add plus button component

create add/plus button component that will be used multiple times throughout the app

Set up Project

acceptance criteria

configurate global css
add all assets to public folder

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.