---
# System prepended metadata

title: Landing Page

---

# 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

![](https://i.imgur.com/s5Cy9XT.png)
    

---

# 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/

---