Wrapped both buttons in a view and added marginRight. React Native Buttons do not allow styling, so if we want more custom looking buttons, we'll have to use Pressable.

I tried to copy what was already there on the airtable table.

See the schema: https://github.com/ninest/ourfinals/blob/schema/prisma/schema.prisma

• What do you think is the best way to store the time slot? It seems we have to store time but not datetime. Perhaps an enum?
• Do any fields have initial values?

Relevant documentation:

• Prisma schema: https://www.prisma.io/docs/concepts/components/prisma-schema
• Data model: https://www.prisma.io/docs/concepts/components/prisma-schema/data-model
• Relations: https://www.prisma.io/docs/concepts/components/prisma-schema/relations

Create a .env with the following

DATABASE_URL=postgres://.../ourfinals...

I think your URL was postgres://adi:Ranfoil@9@localHost:5432/ourfinals_local

The conditional auth stack rendering is done.

 useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(onAuthStateChanged);
    return () => unsubscribe();
  }, []);

...

const isAuthenticated = !!currentUser;

The variable isAuthed is false when the current user is empty.

Along with this, I created a new file Router.js that has the logic

export const Router = () => {
  const { isAuthenticated } = useAuth();

  return (
    <NavigationContainer>
      {isAuthenticated ? <SignedInTabs /> : <SignedOutStack />}
    </NavigationContainer>
  );
};

I also added the logout button on the settings page

Created a component for FormField, which is a simple input. It can be expanded to make it a text area too if required.

All form validation is handled by React Hook Form which should be easy to work with and learn.

The FormField component will also automatically display form errors ("Password required", "NUS email required")

I've also put some styles in the component although we can perhaps move them outside once be figure that out

I added some instructions in the README for setting up the database. We should still read up more on migrations so we're all familiar with the commands.

The current schema only has a User model, but after discussing we can add more fields and models.

We currently have 5 database migrations and might end up making more before launch. Perhaps we should delete them and make a single one? We won't be losing any data and it's not important to back to the previous migrations because they were never in production.

Also, I'd recommend reading through these (if you haven't already). Migrations can get a little confusing and we sometimes do have to manually edit SQL files when we, for example, want to rename a column.

• https://www.prisma.io/migrate
• https://www.prisma.io/docs/concepts/components/prisma-migrate

I am going to start writing crud functions for the database. Functions like createUser, getUser, createAssignment, etc. This article provides a good starting point for how to structure the code: tsh.io/blog/dependency-injection-in-node-js. If we ever decide to not use Prisma in the future for whatever reason, it should be easy to replace it with something else while changing the minimum amount of code

There's currently no system for deciding the values of margin, padding, or colors. For spacing (margin, padding), I suggest we make an object of values to use everywhere. For example:

export const spacing = {
	xs: 5,
	sm: 7,
	base: 10,
	md: 12,
	lg: 17,
	xl: 25,
}

So rather than having a style like

const styles = StyleSheet.create({
  wrapper: { marginBottom: 12 }, // Should it be 10, 11, 12, 13, 14, or 15??
});

we can use

const styles = StyleSheet.create({
  wrapper: { marginBottom: spacing.md },
});

Similar thing for colors:

export const colors = {
	primary: {
		light: '#818cf8',
		default: '#6366f1',
		dark: '#4338ca',
	},
	gray: {
		lightest: '...',
		lighter: '...',
		light: '...',
		default: '...',
		dark: '...',
		darker: '...',
		darkest: '...',
	},
	error: {
		light: '...',
		default: '...',
		dark: '...',
	},
	...
}

This will make it easier to manage colors in once place. If you decide to introduce more themes (light, dark, black), it'll be easier to change the theme using context. Rather than going through every component and changing colors, we can just make a new colors object.

New components/pages:

• [x] Additional info submission upon signup (name, year, nus id, faculty etc.)
• [x] Profile page (this should only be visible once additional info is submitted)
• [x] Marketplace
• [x] Settings

Form library:

• [x] Set up react-hook form
• [x] Set up yup

Functions:

• [x] Implement user creation in database upon signup and additional information input (sign them up as students by default/add to student table)

Additional things

• [x] add the form for assignment submission
• [ ] reading and writing of user data and assignment data from the backend
• [ ] change chat from bottom tab to being assignment specific
• [ ] add user mode toggle (add relevant stacks for this, mainly pertaining to add assignment/teach assignment), and tutor functionality