# TFB Build Sprint 1 🏁
---
Recap: Solent Mind
We are building a course booking application for Solent Mind Recovery College.
They offer courses in managing mental health symptoms and empower people to take control of their recovery.
---
[Demo]()
---
## Roles 💫
- Anna (PO liaison) 📞
- Danilo (UX Lead) 🖍
- Michael (QA) ⛑
- Elena (Scrum & Documenter) 📝
- Jihye (DevOps) 👩🔧
---
## How we worked together
- Plan
- Split
- Review
---
## Sprint 🚀
In this sprint we achieved....
- [x] Magic Link authentication with Supabase 🔑
- [x] User profile with image upload
- [x] Consistent styling with Tailwind CSS
- [x] Test coverage with Cypress
- [x] Slide out menu with navigation
- [x] Static pages - About Us, Contact Us
- [x] Enrolled and upcoming courses displayed
---
## Estimates vs Actuals 📈
for our completed tasks → E 13 / A 16
---
## User Experience 🦚
---
### tailwind.config.js 🛠
---
### Components 🧩
---
---
---
Navigation 🗺
---
---
---
## Bugs 🐛
---
### Rendering the courses somebody is currently enrolled in 📚
For this, we have a separate table called `enrolments` in our database. It has 2 columns, the `user_id` and `course_id` (the course the user is currently enrolled in).
---
As always, the ternary was a bit tricky to write:
```javascript=
<p>
{enrolData && enrolData[0]
? enrolData.map((data) => (
<p key={data.course_id}>{data.classes.name}</p>
))
: 'You are not enrolled in any classes!'}
</p>
```
---
### Changing font with `Tailwind CSS` & `Next.js` 🦄
- `_document.js` in `pages` folder
---
```javascript=
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;1,400&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
```
---
### Passing the session from `_app.js` 🐡
```javascript
import 'tailwindcss/tailwind.css';
import { supabase, session } from '../utils/supabaseClient';
function MyApp({ Component, pageProps }) {
// const { session, supabase } = useSupabase();
return <Component session={session} supabase={supabase} {...pageProps} />;
}
export default MyApp;
```
---
...but we were not exporting the `session`, but the function that is handling it in the `supabaseClient.js` 🙄
```javascript=
export const useSupabase = () => {
const [session, setSession] = useState(supabase.auth.session());
supabase.auth.onAuthStateChange(async (_event, session) => {
setSession(session);
});
return session;
};
```
---
### Couldn't access supabase.auth.user() with getServerProps() 🤷♀️
💡 Solution
```javascript=
const [userData, setUserData] = React.useState(null);
const [enrolData, setEnrolData] = React.useState(null);
async function fetchData() {
const user = await supabase.auth.user();
setUserData(user);
const { data, error } = await supabase
.from('enrolments')
.select('user_id, course_id, classes("name", "short_description")')
.eq('user_id', user.id);
setEnrolData(data);
}
React.useEffect(() => {
fetchData();
}, []);
```
---
## Deployment
### 🙀🙀🙀🙀🙀
---
- Make sure react function name is correct
- When importing react-icons ... 
---
### Improvements 📈
- Try Github action for CI
- Solve errors
- .env history
---
## Testing 🧪
<iframe src="https://giphy.com/embed/r7riLSvkCAgSI" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/test-testing-r7riLSvkCAgSI"></a></p>
---
### Structure
- Test after new feature.
---
### Weird Errors
---
### Weird Errors 🤬
---
### Question 🤔
How would we to test for logged in users with Supabase magic link?
---
---
### Improvements ⬆️
- Modularise Tests 🗂
- Use Jest 🤡
- Greater Test Coverage 💼
---
Next week 🚧
- [ ] Build book courses feature 🗓
- [ ] Generate pages for individual courses
- [ ] Create user manual for application handover 📚
Stretch (if we have time) ⏱
- [ ] Build user progress page (hours attended this term - badges for progress)
- [ ] Add back button using React history (tech spike 🏔)
---
Any questions? 🤔
{"metaMigratedAt":"2023-06-16T16:07:44.281Z","metaMigratedFrom":"Content","title":"TFB Build Sprint 1 🏁","breaks":true,"contributors":"[{\"id\":\"c64c09fb-f2ff-4773-96d9-380de11398cb\",\"add\":1989,\"del\":10},{\"id\":\"1ae0974c-1a1b-4ae5-acee-c1dc5af8fc80\",\"add\":1040,\"del\":29},{\"id\":\"173c5ca6-dd9a-4147-90c5-ad6929e6d625\",\"add\":417,\"del\":35},{\"id\":\"6ca441d5-b821-4326-9bf3-56f745bea257\",\"add\":913,\"del\":54},{\"id\":\"f7800be7-93b6-4348-a3ac-879d43ddafa4\",\"add\":997,\"del\":103}]"}