Sprint 2 and Validation

The last two weeks have been pretty hectic for me. My wife and I are moving soon and we recently put an offer in on a house and it was accepted! Other than that news for me I have been working on the capstone project in the short amount of time in between looking for a house, work, and my other class.

For the 2 week sprint, my goal was to create some reusable React components for text input, a list of experiences, and dropdowns, and also create the create a trip form page. I started off by working on the text input with some of the basic things that a text input needs. For example a label, value, type, and hint. Which was pretty simple since we are also using React-Bootstrap for our project. This library is actually one of the oldest React libraries.

Once I had finished with the reusable components it was time to start on our first form. The trip form is, at the moment, just a name, but later on, we will be adding functionality for a description to add as well, and maybe a start and end date. There is one thing that I did not take into account and that was form validation. Luckily my fellow teammate had a pretty simple solution. Instead of creating our own form validation by hand. He decided to look into Fromik and Yup.

Formik is designed to manage forms with complex validation. This coupled with Yup which is a validation schema package that is actually very similar to express-validator or Joi if any backend express developers have ever used those. You basically tell it what value you want to validate and give it some constraints and a message that will show if the validation fails.

const validationSchema = Yup.object().shape({
	username: Yup.string()
                .min(2, 'Minumum 2 characters')
                .max(30, 'Maximum 30 characters')
	password: Yup.string()
                .required('No password provided.') 
                .min(8, 'Minimum 8 characters')
                .matches(/[a-zA-Z]/, 'Password can letters.')

Once you have your validation schema ready you can pass it as a prop in the Formik component, and also pass some initial values that will be for your form. You can also need to pass some functions that come with Formik that will handle common functions for forms including handleChange and handleSubmit.

    username: "",
    password: "",
    }) => (Form Goes Here)

After that, you are pretty much set up to handle some form validation in your new React application!

Starting Capstone

We have finally started getting the ball rolling on our project. We have begun with divvying up who will work with what. There are 3 people total on the team. Another partner and I are working on the front end and the other partner is working on the back end. For the front end we decided to go with React as our framework, Bootstrap as a CSS framework, and Jest as our testing framework.

I was given the task of setting up our GitHub repo for the front end, while my other partner was given the task of setting up our task management software Jira for the team. Now something I have come to realize with using React is when you want to get things up and running easily you run ‘npx create-react-app’ and from there you are usually good to go, but if you run into issues you dig around the internet to find a solution, usually found on StackOverflow, and you find out how much this command actually does for you.

I don’t know how common knowledge this is, but I won’t butcher everything it does for you. I think this article is a pretty good explanation for what is happening. I really had no idea what a webpack was or what it did, but I am glad someone smarter than me came up with it so I can spend more time googling how to center a div, and how to setup my repo!