Struggling to find tasty gluten-free foods? Gluten-Free Finds is here to help! Our platform brings together the best gluten-free options at local stores and restaurants, all in one convenient place. Our community-driven website allows users to recommend and review stores and restaurants that offer delicious gluten-free items. With community recommendations at your fingertips, you can easily find delicious, safe gluten-free meals without the hassle of endless searching. Whether you’re looking for a new favorite bakery, a restaurant with a dedicated gluten-free menu, or a grocery store with a wide selection of gluten-free products, Gluten-Free Finds is here to help.
The first page has 2 options: Log In or Sign Up.
The second page has 2 options: Submit a find or browse the finds already on the website.
After selecting browsing, there are 2 options: restaurants and stores
Which will each display their gluten-free items and a comment from the person who uploaded it.
After selecting submit:
- Secure login over HTTPS
- Ability to select options
- Display of submissions by other users
- Results are persistently stored
- Ability for admin to create and delete submissions
HTML - Uses correct HTML structure for application. Hyperlinks to visit restaurant or store websites.
CSS - Application styling that looks good on different screen sizes, uses good whitespace, color choice and contrast.
JavaScript - Provides login, option displays, submission forms, display other users submissions, backend endpoint calls.
React - Single page application with views componentized and reactive to user's actions.
Service - Backend service with endpoints for:
- retrieving submissions
- viewing submissions
- Create/customize digital maps based on Google Maps data
DB/Login - Store users and submissions in database. Register and login users. Credentials securely stored in database. Can't submit or browse unless authenticated.
WebSocket - As users make submissions, their submissions are broadcast to all other users.
The prerequisites are complete.
- I used the proper tags BODY, NAV, MAIN, HEADER, FOOTER
- I included links between pages like Simon
- There is textual content
- The "Browse" page is the place holder for most of the 3rd party calls I will need.
- Images will also be in the browse page under "coming soon"
- Login placeholder is on the main page, like Simon
- Database and WebSocket placeholders are also on the browse page.
The prerequisites are complete. For this deliverable I styled my website to how I want it to look.
- Header/Footer/Body
- Navigation - I made the buttons look nicer and have the directory in the top right of every page.
- Responsive to window sizing - Made it flexible to different window sizes.
- Application elements - Made the colors and spacing comfortable, different shades of brown because it's about gluten. Added functionality for the user to submit an image.
- Application text content - Arial and sans-serif fonts
- Application images - The top left of every webpage has a logo I made. The browse page has place holders for the images the user will be submitting.
The prerequisites are complete. For this deliverable I used JavaScript and React so that the application works for a single user. I also added placeholders for future technology.
- Bundled and transpiled - done
- Components - Login, submit, and browse. With mocks for login, WebSocket.
- login - You are prompted to login or create an account on the home page. Displays authenticated or unauthenticated components.
- database - Displays user submissions. Done locally no but will use database later.
- message dialog - similar to simon-react, for login stuff, shows messages
- application logic - The submitted finds will be displayed for users to browse.
- Router - Routing between login and submitting components.
- Hooks - I have useState for authentication and I get people's userName from local storage.