Feedback

[esin87]

Project 3 Feedback

Code Quality - Performing

Criteria: Is the code well-formatted? Are variable and function names semantic and sensible? Is the code easy to read and understand?

Strengths:

• Code is mostly well-formatted with semantic and sensible variable/function/component naming throughout.
• Code is easy to read and understand, with no remaining console.logs in deployed frontend.
• Code is organized in a rational way, including in individual files and directories.
• Backend code is modularized well and frontend is organized in logical way for a React application.

Areas for Growth:

• Be sure to set up your code editor to enforce consistent formatting. For example, if you're going to use semicolons, use them everywhere. Noticed inconsistent spacing and indents in both frontend and backend code.
• On the frontend, be sure to reuse UI components where possible. For example, there probably only needs to be one Recipe Form, which can be reused in a New Recipe and Edit Recipe component with different form handlers. The principles of UI component modularity and reusability are at the heart of React!
• Since you are using React Bootstrap, I would use it for more of your interface, such as the Form components. I noticed in some views of the Edit Recipe modal that the text fields overflow the modal. This wouldn't happen if you used a React Bootstrap Form.
• Be sure to remove all instances of unused, commented-out code from the main branch.

Technical Requirements - Excelling

Criteria: How does the project stack up to the requirements for this project? Is the developer making use of the material we've covered in a way that makes sense?

Strengths:

• The project meets all the technical requirements set out for this assignment and adds more, including using the React Bootstrap library and implementing search functionality.
• The project shows deep understanding of frontend and backend technologies and brings them together to create a functional, well-designed full-stack application.
• Backend routes are built out to include more detailed HTTP codes.
• Excellent use of Git organizations, the Git branching workflow, and good history of Git commits, rebasing and merging. Loved how y'all used the Trello board to manage your sprint. Way to work smoothly as a dev team. 🦾

Areas for Growth:

• I would love to see y'all add some unit testing to your Express backend. If React testing is something you're interested in, I can send you some repos and documentation.
• Your GitHub repo shows a good history of descriptive commits, but (and this is relatively minor) work on both the consistency of your commit message formatting as well as their content. Ideally, you should have one change per commit. The standard format is usually 'capitalized present-tense verb + description of what was done' for each and every commit. For example, 'Add styling to app container' or 'Refactor API call'. This is my favorite article on how to write good commit messages and why it should be a focus for developers.

Creativity and Interface - Performing

Criteria: Is the application easy to navigate? Does it work well in every major browser? Is it responsive? Does it incorporate modern UI Themes?

Strengths:

• The UI is very professional and polished. The design is appealing and makes great use of good design principles.
• The custom logo is lovely, and add such a charming, professional touch.
• The app is really responsive for the most part and looks great on a range of screen sizes, from desktop to mobile.

Areas for Growth

• If you want your Bootstrap Nav component to be responsive, use the toggle and collapse components.
• As mentioned previously, double check that your edit modal looks right on different browser widths.
• I would make it so that the recipe cards have cursor: pointer on hover state to give the user an affordance into their clickability.

Functionality - Performing

Criteria: Does the application work without errors or bugs? Does it present a complete app, where every feature is fully implemented in a way that makes sense?

Strengths:

• The application works as expected without any major errors logged to the console or bugs.
• The application presents a complete application, with features fully implemented!
• Using the application feels very straightforward and intuitive, with features working as expected. The search feature is case-insensitive and also returns partial matches, which is great!

Areas for Growth:

• The search bar accepts empty search strings -- what might you do to make it so that at least one character is required when a user submits a search?
• Building out some additional error handling would be great -- how could you display a message to the user if there are API issues, instead of just logging it in the catch? In a similar vein, some form validation would also be a great idea! I noticed that if I try to create a recipe without an author, it logs a 500 error but does not give feedback in the UI. You could avoid this by simply putting a required prop on all the form inputs that are required fields, or supplying a default value when you send the data back to the API.

Presentation - Performing

Criteria: Is there adequate documentation? Is the repository well-organized and free of clutter?

Strengths:

• The frontend repo has really good documentation, and both the front- and backend repos are well-organized and free of clutter.
• Frontend includes description, tech used, installation instructions.
• The screenshots/images of wireframes, dev collaboration, Trello board, are super engaging, and show off the great groundwork y'all laid for your project planning and teamwork.

Areas for Growth:

• I would add a planning folder that contains your planning-related assets.
• Be sure to delete unused CRA files (logos, web vitals, testing files, etc.)
• I would flesh out the backend readme a bit more -- possibly including a req/res diagram like we drew in class this week.
• Fill out the URL fields and tags for both repos in the About tab at the top right.
• My personal preference is to host images on a site like imgur, and use URLs as the src in your images. That cuts down on the size of the repo quite a bit.

Hard Requirements - (Mostly) Complete:

General Requirements:

• [ ] You must include a planning/ directory that sufficiently demonstrates your team's planning process. -- this is a quick fix
• [x] Both your front-end and back-end repos have a README that adequately documents the project.
• [ ] Every team member must have roughly the same number of individual commits in the commit history for your app. -- the commits are not quite evenly distributed on either repo
• [x] Every team must follow a Git Workflow.
• [x] Every team member must speak for roughly the same amount of time during the group presentation
• [x] Your back-end/API must be deployed to Heroku and your front-end must be deployed to Netlify.

Back-End Requirements:

• [x] Your back-end must be a Node, Express, and Mongoose API with at least 1 non-user models. No associations are required.
• [x] You must have Create, Read, Update, and Destroy functionality built throughout the app (i.e. You don't need full CRUD on every model, just full CRUD throughout your models where it makes sense).

The repository for your backend API should include:

• [x] A working JSON API (built by your team) built using Express and Mongoose that meets the technical requirements above.
• [x] Frequent commits dating back to the very beginning of the project.
• [ ] A readme.md file in the root of your repo that follows good standards of documentation (i.e. explanations of the technologies used, the approach taken, features, installation instructions, unsolved problems, etc.)
• [ ] A link to your hosted, working API in the URL section of your Github repo -- ❌ This is an easy fix - put the deployed URL in the URL field and add a short description.

Front-End Requirements

• [x] Your front-end must use React and leverage the backend API in the above requirements.
• [x] You must communicate with the back-end API RESTfully to Create, Read, Update, and Destroy resources (using either fetch or axios).
• [x] You must use either CSS Grid or Flexbox along with media queries to make your app responsive across mobile, tablet, and desktop widths.
• [x] You must have at least 4 components

The repository for the frontend of your application should include:

• [x] A working frontend application (built by your team) built with React and React Router that meets the technical requirements above.
• [x] Frequent commits dating back to the very beginning of the project.
• [x] A readme.md file in the root of your repo that follows good standards of documentation (i.e. explanations of the technologies used, the approach taken, features, installation instructions, unsolved problems, etc.)
• [ ] A link to your hosted, working application in the URL section of your Github repo ❌ -- Quick fix, same as above

Grade: Pass 🎉🎉🎉

Coding Chefs, thank you for all your incredible work on this project. From the project workflow to the actual coding and technical output, I was impressed by how quickly this group established a good workflow and how much you achieved in such a short sprint. Together, you built a sophisticated application that reflects the key ideas of fullstack development that we've learned in the course. More importantly, you really seemed to enjoy the process of creating something new and useful on a team of other devs. There are a couple of areas for growth outlined above, and I recommend adding a planning directory to both repos as well as building out the backend README. I'm excited to see how you continue to build on this application, and can't wait to see how your coding journeys continue.

[dvlprwchoi]

Thank you Esin for the feedback!!!