# Subcomfy - Week 6 --- ## WHY  --- ### Subcomfy helps you feel more productive...  --- ### ...and happier straight away  --- ## Demo --- ## Homepage  --- ## Product Page  --- ## Basket Page  --- ## Planning - Name & Logo Generator: <https://namelix.com/> - Figma: Page Design, Page Flow, Database --- ### Pages  ---  --- ### Database  --- ### Pages & Components  --- ## Authentication We tried to implement a sign-up and login... --- ```js= export async function getServerSideProps(req, res) { const cookies = new Cookies(req, res); //COOKIE STUFF HERE } ``` --- ```js= if (!cookies.get('sid')) { return { props: { session: false, data: 'no data', sid: 'no sid', }, }; ``` --- ```js= const sid = cookies.get('sid'); const data = await model.getSession(sid); return { props: { session: true, }, }; } ``` --- ```JS= if (!cookie) return res.redirect('/'); ``` --- Reflections: - Trying to use `next.js` like express gets confusing - Using fetch on `api` routes to get a response seems like a better way - Server-side vs client side rendering 🤦‍♂️ - So many new things - my head hurts ---  --- ## Database Bugs `Module not found: Can't resolve 'fs'` - Should call database-functions from model.js **on pages, not components**! - Server-error without reference (e.g.`index.js:26:30`) &rarr; check model.js for typos (e.g. missing ,)! --- ## What worked well - **Planning** on Figma - **Group** & Pair Programming: delegating, merging - Use of **Components**, passing props & keys - Shopping **Basket**: - add items - save basket - calculate total sum - **Multiple colour options** are stored on a product in database: ```sql= '{"colour":["purple", "blue" ,"pink"]}' ``` --- ## Future improvements: Product * An option to **subscribe** * Use FAC22 **discount code** on basket page * More catalogue **filters** * More **colours, sizes** ( * Perhaps own database tables? * **Variations** between products --- ## Future improvements: Coding * Write **Tests** * More **styling** * Try more React & Next * hooks * built-in features (e.g. [automatic cookie reader](https://nextjs.org/docs/basic-features/data-fetching#provided-req-middleware-in-getserversideprops)) * libraries ---