USER INTERFACE PROGRAMMING COURSE


UI Using React Native

OVERVIEW

BadgerChat started as a website and was later adapted into an app using React Native. This app was created in Visual Studio Code using Expo and Expo Go. The app includes a login and registration system, allowing users to sign in with an existing account or register a new one. After logging in, users arrive at a landing page with a drawer-style menu housing various chatrooms. Selecting a chatroom displays its messages, enabling users to post or refresh the content. I also implemented a logout page and provided a guest browsing option, where users can view chatrooms without posting. To enhance accessibility, I later added a voice feature using DialogFlow. The website and app were created during a user interface class.

GITHUB DOCUMENTATION

Download the GitHub files here!

TASKS

  1. Try to register for an account that already exists.

  2. Register for a new account.

  3. Logout.

  4. Login with an incorrect password.

  5. Login with a correct password.

  6. Browse two different chatrooms.

  7. Create a post and show that it has been added.

  8. Logout.

  9. Continue as a guest.

  10. Visit a chatroom.

  11. Logout (return to signup).

BADGERCHAT

TASKS

  1. Show the short summaries of all news stories.

  2. Read 2 specific news stories, automatically jump to the bottom, and navigate back to the main news screen.

  3. Show and toggle preferences

NEWS FEED

OVERVIEW

This Wisconsin news feed was created using React Native and Expo Go during a user interface class. I used multiple calls to the API to fetch the new information and generate the news stories.

GITHUB DOCUMENTATION

Download the GitHub files here!

BASIC CALCULATOR

OVERVIEW

This calculator was my first project using React Native and Expo Go. My tasks were to display text and info, get input, and add “Add” and “Reset” buttons that modify the total.

GITHUB DOCUMENTATION

Download the GitHub files here!

TASKS

  1. Add 3 numbers together.

    • At least one of these numbers must be negative.

    • At least one of these numbers must contain a decimal.

  2. Use the reset button after the numbers have been added.