# Final Project: TeleGran
---
### Co-Authoring
```
Co-authored-by: chunzg <chunzhang53@gmail.com>
Co-authored-by: Chisha <64862888+NewCoderCA@users.noreply.github.com>
Co-authored-by: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Co-authored-by: Nafisa Axmed <nafisa@Nafisas-MacBook-Air.local>
```
---
### React with a Node server (without using Next.js)
https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/
Because we have built server and client from scratch, to run our client-side app locally, move into the client directory in our app, then `npm start`. It will then automatically start on localhost/3000.
---
### Styled Components
1. npm install styled-components
2. In components dir, create a styled component file, eg: Button.style.js
3. In this file, create all the logic for creating a button, eg:
```
import styled from “styled-components”;
export const Button = styled.button`
width: 100px;
height: 50px;
background-color: green;
`
```
4. Make a Container.style.js for overall page styling
Extension for styled components: vscode-styled-components
---
### Creating multi-page websites with React
https://www.techomoro.com/how-to-create-a-multi-page-website-with-react-in-5-minutes/
---
### Important Links
#### Designing
- [TeleGran Prototype on Figma](https://www.figma.com/file/IfZ16NjPCNCI6yEGZs6kvG/Untitled?node-id=0%3A1)
- [Miro board](https://miro.com/app/board/o9J_lCuiqHA=/)
#### API
- https://discord.com/developers/docs/resources/channel#get-channel-messages
- https://discord.com/developers/docs/resources/channel#create-message
- https://api.slack.com/messaging/retrieving
- https://api.slack.com/messaging/sending
#### User testing
- [Google sheet](https://docs.google.com/spreadsheets/d/1cCzfpFph0kdUan6OZKkhZDjIGHHEVMDcmjbLy8fWguE/edit#gid=0)
#### Github
[Issues spreadsheet](https://docs.google.com/spreadsheets/d/1Th1PHsqf0AU5XDoyqHNnxhZlbmpDxzMz2cLhe8K1YBg/edit#gid=0)
[Sprint planning/Gantt Chart](https://docs.google.com/spreadsheets/d/1BdTd_8NZ0Ap0MPvyR2PvcSAN7FNQeox44xY42ZnEB4A/edit#gid=0)
#### Other
[Week 10 presentation](https://hackmd.io/-VC78GlpQwGbEz2BjvIbyw)
---
### Design
![Draft logo](https://i.imgur.com/GoG8UCe.png)
#### Colour palette
Pink logo circle - #febeb5
Dark green - #23aa77
Light green - #73E3C8
Off-white background fill - #F4F0F0
#### Fonts
Main font - Epilogue
---
### Tech Stack (planned)
React/Next.js
Styled Components
PostgreSQL
Svelte
---
### Features
- Discord/Slack integration
- SOS quick message option
- Speech-to-text writing
- Simple UI
---
### Roles
- UX Lead: Jo
- QA: Nafisa
- Scrum Facilitator: Chun
- Devops: Chisha
#### User Manuals
[Chisha](https://github.com/fac21/user-manuals/issues/3)
[Jo](https://github.com/fac21/user-manuals/issues/7)
[Chun](https://github.com/fac21/user-manuals/issues/4)
[Nafisa](https://github.com/fac21/user-manuals/issues/11)
---
### Questions
- Tech stack: should we use Next/Svelte?
- Tech stack: Which one compliments React better for this type of project?
- Tech stack: Would like to incorporate AWS much need clarity where it can be used - could deploy on AWS or Heroku or Netlify (Lambda functions: Data is stored in cloud based database and use the Lambda functions to get the data) Might not need it for use case so best to use for Deployment
- Slack API: How does it work? Blocks API how you can use the interface
- App will be mainly client side - could start with React (Might need to store API key in backend)
- Either use a Bot that will be the intermediary for the TeleGran or a user via our app that the Granny can have access to read, edit and send messages
- Do we need a database? -> we want one to practise DBs
- What will go in the database?
---
### Things Learned
- Can add "notes" to Kanban board and then press "convert to issue"
- Git remote set-url ...
- .env file has an EQUALS SIGN BETWEEN THE KEY VALUE PAIRS!! **NOT A COLON**
---
### How we worked:
- In pairs/individually at the start, Jo on Slack, Nafisa on tests etc
- Then pairs on components
- ![Slack message on server start](https://i.imgur.com/Qetxkl6.png)
- ![Speech recognition works](https://i.imgur.com/ZzitmBI.png)
- https://www.twilio.com/blog/react-app-with-node-js-server-proxy rewrote our repo to be in the style of this repo with just one package.json to get the Slack API to work. (package hell)
- ![gran sends a message](https://i.imgur.com/4wIZBSf.png)
- other pair did work on styled components
---
### Challenges
- Node versions!! Eventually we did `volta install node@14.17.0` to get us all on the same version
- make sure your npm packages are installed in the right place (e.g. react error that Josh replied about)
- Having two package.jsons
- Sending via a proxy server
- At first, to get the test message to send to Slack, we needed to have both servers running at the same time, ie. `npm run dev` in root and `npm start` in client.
---
### Error messages
- `Proxy error: Could not proxy request /logo192.png from localhost:3000 to http://localhost:3001.`
- if error message mentions "modules not found", probably need to delete node_modules (`rm -rf node_modules`) and clear cache (`npm cache clear --force`). Then `npm install`. This should work but sometimes also need to delete package-lock.json. Closing and reopening terminal can also help.
---
### Git Tips
If you have changed github repo name, do `git branch --set-upstream-to=origin/main main` to update name locally
`npm run build` to run production version of app. This shows you any errors that may appear during deployment, gives you chance to sort them out before deploying.
`npm install --package-lock-only` sorts out package-lock conflicts.
Remember: `npm install` each time you pull because node_modules is hidden in gitignore (the reason it's in gitignore is it's too heavy to push and pull it to GH every time).
---
#### Our NPM Packages
- Express pino logger ("pino colada") :pineapple:
![](https://i.imgur.com/1XigYpG.png)
- Express
- bodyParser
- Node-Fetch
- npm-run-all :running:
- nodemon
- node-env-run
- styled-components
---
## Learnings from Week 12
Don't do response.json twice in one .then!! (Body consumed error)
Useful resource:
https://github.com/fac19/week11-where-is-whippy
<Redirect to="sfsdf"> --> return this in form handleSubmit function, rather than have a button wrapped in a <Link>
Learnings: need CORS redirect header stuff
.ENV for both client AND server --> the locsl
![](https://i.imgur.com/5xZBiy6.png)
![](https://i.imgur.com/7QHYoQR.png)
Speaking messages and sending probably works:
![](https://i.imgur.com/nC9QwdU.png)
challenges:
CSS in react
{"metaMigratedAt":"2023-06-16T00:58:06.911Z","metaMigratedFrom":"Content","title":"Final Project: TeleGran","breaks":"true","contributors":"[{\"id\":\"b3f692e6-790d-4bd7-b250-3be9fa544d3d\",\"add\":3656,\"del\":32},{\"id\":\"12ba2d80-f158-4148-9ff5-c50f626d4b40\",\"add\":48,\"del\":47},{\"id\":\"59db8470-95af-4fbf-9a40-43cf0b51d153\",\"add\":2848,\"del\":504},{\"id\":\"f740e8d0-3ec2-42c0-ac17-f91da137f39d\",\"add\":769,\"del\":5}]"}