# Landing Page

# Content
Gather images
Explainer text

# Components
Button (Register)
Link (Login, Skip)
Carousel
Nav
- Logo
- Home
- Trimesters
- Login/Sign Up
- FAQs
- Search (maybe?)

Footer
- Logo
Company
- Contact us
- About us

Resources
- Glossary

Community
- Forum (Ask Ros about)
- Developers

- Copyright thingy

Features
Authorization system

Data points
- Picture srcs

# Home Page

Components
- Nav
- Tabs
- Trimester
- Summary
- Section
- Carousel
- Article Card
- Logo
- Footer

Features
- Visual feedback based on pregnancy progression
- Get user info/week they are at.
- Fetch image based on the week

Data points
- Articles
- Trimester
- User
- BabySize

# Article Page

Components
- Media
- Article
- Resources
- Disclaimer

# Sign Up

Content
- Username
- Email
- Password
- Trimester Info

Component
- Input Field
- Button

Data Point
- Create User Info

# Login

Component
- Input Field
- Button

Data Point
- Fetch User Info
- Picture srcs

# FAQ

Content
- The actual questions and answers

Components
- Q&A
- Question
- Answer

For Ros
Questions:
- Attribution of article [credit to the author? or all by Ros?]

Stretch
- Upload profile picture during profile creation
- Like articles for later reference

Tomorrow
- Determine DB schema
- Spike individually

Workflow

- Setup as 4
- Components wing it
- Create issues

Code Review
- Review individually at your own pace
- Review at set times as 4
- Discussions for refactoring

Standups
- Decide priorities/issues for the day
- Review what was accomplished through checklists

Learning Approach
- Sprint 2 consider changing the approach

| Pages | Components | Features |
|--------------|-------------------------------|---------------------------------------|
| Landing Page | Button | Autentication [3rd Party] |
| Home | Link | Visual representation [baby progress] |
| Login | Carousel | |
| Sign Up | Nav | |
| FAQ | TrimesterNavCOmponent | |
| Contact Us | Footer | |
| About Us | Logo | |
| Glossary | FooterSection | |
| Developers | Tabs | |
| Article | TrimesterTabComponent | |
| Topic | Section [exercise/well-being] | |
| | Article Card | |
| | Summary | |
| | Greeting/baby progress | |
| | Media | |
| | Full Article | |
| | Resources | |
| | Disclaimer | |
| | Input Field | |
| | QNACard | |

# Tech Stack

Front-End
React

Testing
Cypress - E2E Page by Page

Server/Router
Next.js

Database
Firebase/Strappi

Authentication
Firebase

Styling
Research:
Material UI
Styled components
Chakra UI
Tailwind

Form validation
React form-hook (for validation)

Deployment
Vercel

# Database Layout

Article : {
title: "",
content: "",
media: [{ src: "", type: "", alt: "" }],
author: "",
resources: [{name: "", src: ""}],
trimesterRelated: [1, 2, 3],
topic: ['wellbeing', 'exercise', 'diet'],
createdAt: ""
};

Users : {
userId: "",
username: "",
dueDate: number,
}

Babysize : {
week1: {description: "", imgSrc: "", alt:"", weight: null}
}

FAQs : {
QA1 : {question : "", answer: "", createdAt: ""},
}

# Mentors
Introduce ourselves and project
- Agree when/how frequent Code Review
- Ask about styling frameworks
- Ask about forum creation
- Explain our approach to working on issues and reviewing code, possibly ask for suggestions
- Service that assists with workflow? Mention clockify
- Ask mentors about estimation during sprint. Happens or not?
- React libraries that might be useful?

# User Stories
- [x] As a user I want to be able to create a profile so that I can get customized "your baby size" information
- [ ] As a user I want to easily access informative articles on nutrition
- As a user I want to get suggestions for healthy recipes to cook
- As a user I want to easily access informative articles on exercise
- As a user I want to get suggestions and step-by-step guides for simple exercises I can do
- As a user I want to easily access informative articles on wellbeing
- As a user I want to get suggestions and step-by-step guides for things I can do to improve my mental health
- [ ] As a user I want to be able to connect and communicate with a group of fellow pregnant women so that I can feel supported and share my experiences with them
- [ ] As a user I want to be able to quickly access information via a simple search

# Actions 23-nov
- Create a doodl for availability for meeting with Jack/Sarah

# Spikes

What to look for in libraries:
Updated recently
Amount of downloads [ reliability ]
Versioning

Spikes - 30 min. each item
- Material UI - Yassien
Pros:
- the largest UI community in the React ecosystem. It's almost as old as React itself its history stretches back to 2014
- docs seem simple enough to understand
Cons:
- Couldn't get it to work on bookbrroch project when testing; kept getting "cannot read properties of undefined (reading 'button')" error
---

# Tailwind - Alex

Pros:
Has already styled components
Fully responsive
Docs are pretty straight forward
Similar to Bootstrap but more flexible

Cons:
Not all components are free
Can be very long and messy

<svg
className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
viewBox="0 0 1155 678"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>

---

# Forum - Sumithra
- https://disqus.com/
- https://disqus.com/api/docs/
- Disqus works on just about any type of website or blog and can be installed either with a drop-in code snippet or by using one of the plugins available on our Install page.
- You can also customize and tweak Disqus for your website with extensive APIs and JavaScript hooks.
- Disqus is free to use for most sites (personal blogs, non-profits, education).
- https://www.discourse.org/

- Discourse is another free, open-source forum software
- Discourse provides seamless login integration with third-party applications such as Slack and GitHub and social media platforms, including Facebook, Instagram, and Twitter.
- Pros

- Its dynamic notifications alert you about every mention and reply
- Members can choose to follow threads from emails with the mailing list mode
- There are a variety of plugins in every hosting plan, allowing you to extend its functionality
- Monitor your community statistics through an interactive admin panel
- Cons

- It might take some time and learning to get used to all the features
- Discussions can quickly get disorganized due to the members’ numerous replies

- Overall, this forum software provides a modern way to build a place of discussion for communities.

- It combines email notifications with social media integration, making it easier for members to log in. Moreover, spam blocking and two-factor authentication strengthen your account’s security.

https://docs.discourse.org/
https://www.hostinger.co.uk/tutorials/best-forum-software

Install Disqus in NextJs
https://imranhsayed.medium.com/disqus-is-a-networked-community-platform-used-by-hundreds-of-thousands-of-sites-all-over-the-web-39b88bafaca5

Zapier connect firebase and discus
https://zapier.com/apps/disqus/integrations/firebase

---

# Chatbot - Patrick

React Chatbot Kit
https://www.npmjs.com/package/react-chatbot-kit

Stats:
800+ downloads
Last updated yesterday
Well documented

Pros:
Easy to install npm i react-chatbot-kit

Cons:
Harder to customize
Not a good 'out of the box' experience
Initial setup required

React Best Chatbot - https://lucas-fernando.vercel.app/react-best-chatbot

Stats:
9 weekly downloads
Last updated 6 months ago
Very well documented

Pros:
Good out of the box experience
---

# Github Actions - Yassien

Pros:
- automate things like; assigning issues to project board, assigning reviewers for pull requests, running tests on push
- the github docs seem reasonably extensive

Cons:
- written in YAML so we'd have to learn how to implement it
- since our project isn't very big (only 4 devs not 400) or very long (just 3 weeks), is it worth spending time learning how to implement when the potential time savings from using it are minimal? (i.e. we can just run all tests before pushing ourselves)

---

# Headless CMS Strapi - Alex

Strapi Weekly Downloads:
16,912
Downward curve

Firebase Weekly Downloads:
1,369,293
Steady flow

Decided to not use it.
Create custom url which contains a form for Ros to upload data

---

# Carousel - Sumithra

https://alvarotrigo.com/blog/react-carousels/

Swiper - Free
https://github.com/nolimits4web/swiper
https://www.npmjs.com/package/swiper
https://swiperjs.com/get-started

---

# Tabs - Patrick

## [react-tabs](https://www.npmjs.com/package/react-tabs)

Stats:
558k+ weekly downloads
last updated 7 months ago
Documentation might be an issue, although seems easy to use

Pros:
Popular
Easy to use
Easy to customize

Cons:
Can't think of any. Solid package
Need to check how the screen reader handles the content


---

# Media - Alex

Videos:
https://www.npmjs.com/package/video-react

---

# Nav - Yassien
- react-site-nav by Yusinto Ngadiman
- react-responsive-animate-navbar

- Wave web accessibiliDev extension reactty evaluation - Sumithra

https://wave.webaim.org/

---