# 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  #### 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 -  -  - 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) -  - 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:  - 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   Speaking messages and sending probably works:  challenges: CSS in react