---
tags: codeLab
---

# codeLab Initial Learning Project Fall 2023

## The Initial Learning Project: The Personality Quiz!
- what is the initial learning project?
- The initial learning project in codeLab is a personality quiz that passes in data from an airtable, logs user responses, and then connects to openAI (ex., by asking "based on these responses, which ten movie characters am I like?")
- what tools will I be learning?
- javascript
- next.js and React components
- airtable
- css, tailwind, other styling languages you choose
- what do I need to build and share? when?
- You want to build a web-based view of an airtable base that contains the options for your personality quiz. Anna and Christine used next.js and vercel to do this.
- we'll share our progress, ask questions, troubleshoot, etc. via slack in the channel ```#ll-codelab```
- You should share any moments that represent learning breakthroughs for you by posting to ```#ll-code-lab``` and ```#show-your-work```
- maybe when you learn how to return an array from airtable!
- or you get your answers to show up as cool looking grids!
- of course, you'll eventually share your personality quiz in ```#ll-personality-quiz```, so we can all take it and learn about ourselves :)
- **deadline**: end of October
- lab logistics
- codeLab leaders
- Anna Ivanov: senior MDF (Slavic)
- Christine: assistant director of the LL
- slack channel
- #ll-code-lab

## The Tools

Learning how to code and then using code to build websites and apps requires many tools.

For the app we'll build first, knowing these tools will be helpful:
* javascript
* [codecademy js tutorial](https://www.codecademy.com/learn/introduction-to-javascript)
* next.js
* here's a tutorial that walks through how to [create a next app](https://nextjs.org/docs/app/building-your-application)
* airtable
* [an overview of airtable](https://www.airtable.com/guides/start/airtable-basics)
* [a sample airtable](https://airtable.com/app8kRRfha0CQ1hG2?) that anna and christine made for their personality quiz prototypes
* [using airtable personal access tokens](https://airtable.com/developers/web/guides/personal-access-tokens)
* this will be useful once you're trying to connect your app to an airtable base
* css
* [linkedin learning css tutorial](https://www.linkedin.com/learning/css-essential-training-3)
* [next.js styling doc](https://nextjs.org/docs/app/building-your-application/styling)

## some docs to get you started
* [terminal + setting up coding environment](https://hackmd.io/tDt-lhlZSninMyKj8S3xUA)
* [javascript basics - incl. making a next app](https://hackmd.io/qz_n8IV4QAepX2Sha2bZew)
* [connecting your next.js app to airtable](https://hackmd.io/AhBpXa0TRneC0H_6QizCeA)
* [next.js basics](https://hackmd.io/T68tvR_YT5Og8X6JYb6pqw)
* [mk notes on client side components](https://hackmd.io/g3wbroavSWqPsIkRKhtekQ)

## next.js and react tutorials
* [next.js for beginners](https://www.youtube.com/watch?v=ZVnjOPwW4ZA)
* [react for beginners](https://www.youtube.com/watch?v=SqcY0GlETPk&t=0s)
* [another next.js tutorial - 30 mins](https://www.youtube.com/watch?v=NgayZAuTgwM)
* [next.js tutorial using client forms as example](https://www.youtube.com/watch?v=nSfu7sHPE9M)
* [next.js making a POST request](https://www.youtube.com/watch?v=X5M8MtKsIs8)

## some real-world code examples
* [this linkedin learning python tutorial has some useful coding analogies that apply across different languages](https://www.linkedin.com/learning/programming-foundations-real-world-examples/what-you-should-know?resume=false&u=2194065)
* [same with this one](https://www.linkedin.com/learning/programming-foundations-object-oriented-design-3/encapsulation?u=2194065)

## more useful links
* [markdown syntax basics](https://hackmd.io/im0mHRWDRWakfC5JS84e_w?both)
* [cloning a github repo](https://hackmd.io/KuxRCUEjTGuwZHMoWV7BJw)
* [adding dynamic routes](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)
* marlon's codeLab docs
* [mk-resource-setting-up-your-dev-env](/1ym5sQYWQpycSLoQ3dnfCA)
* [mk-resource-starting-nextjs-13-app](/VUB0ZVLBQCa7DISuWKxchg)
* [mk-resource-js-basics](/vB8EsXlcTjym8yscIz7Dgg)