melvinidema / blok-tech Goto Github PK

Create a database and set-up your remote connection

Todo

• Make MongoDB Account
• Make Organization
• Make Cluster
• Make Database
• Create dbUser
• Set-up connection

Maybe also research MongoDB packages to help with connection?

Based on the concept, job story, requirement list and wireframe from the previous week start building out the front-end of the feature you are going to make for the matching-application. You can build the interface with the templating engine as you learned in back-end as opposed to 'plain' HTML & CSS.

Todo

• Turn your wireframe into HTML pages. Do a HTML breakdown of your wireframe and use semantic HTML as learned in previous courses.
• Add presentational CSS to set-up some basic style. Think about colors, fonts, lay-out, responsiveness.
• Add interaction and states, make sure it feels like an actual webpage. Add states to interactive elements, maybe add some animations and transitions.

Don't forget to think about the flow of your application (zero states, happy flow, error states). Do you need multiple pages?

References

📱 Het Concept

• Install & Setup Webpack
• Convert API
• Implement Progressive Enhancement

Install additional tools to help you write consistent code

Try to implement atleast one linter and one formatter in your project Additionally research what they do and document the research in your wiki.

Pro Tip™: Most linters are often available as extensions in text-editors. You install the extensions and the only thing you additionally have to do is to create a configuration file to tell the extension what rules to check for.

Todo

• Research multiple linters
• Configure Linter
• Configure Formatter

The code you write will be executed by computers, but it will exclusively be read by humans. Therefore, it's critical that your code is easy to read, understand, and "mentally parse". Go back into your work so far and make sure that everything you've done so far is easy to understand for "outsiders" to your project.

Todo:

• Pick (minimum) 5 of the Clean Code JavaScript concepts
  • Document what you refactored with before and after code blocks in your wiki.
• Tweak or set-up additional linters

Resources:

https://stackoverflow.com/questions/5778245/expressjs-how-to-structure-an-application
https://github.com/abdulmoiz251/node-express-rest-api-boilerplate
https://laravel.com/docs/9.x/controllers
https://softwareengineering.stackexchange.com/questions/255636/how-to-determine-what-should-get-its-own-respective-controller
https://www.patterns.dev/posts/classic-design-patterns/#detailmvc
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes

Implement your git strategy. How are you going to write commit messages? Are you going to make branches? Are you going to use issues or projects? Don't forget to document your research and final strategy to your wiki. Start using the command line to version control your matching-application. Just see how you like it and what the benefits are to using Git on the terminal. You can always switch back to version control trough your editor or a GUI.

Todo:

• Udemy Git & Github Bootcamp Course
• Summarize Git & Github Bootcamp Course
• Write about Git(hub) Strategy

References:

Git and Github Bootcamp
Git from the bottom up
Build your own Git
How to write Git Commit Messages

Research and update your personal development setup to optimize your workflow

Research the world of development tooling, and document the research in your wiki. Look into the following subjects, and describe why you think it's useful (or not) and if/how you're using it in your own work:

Todo

• Text Editors Themes (f.e. color themes, fonts)
• Text Editor Settings (f.e. settings.json)
• Text Editors Extensions (f.e. extensions marketplace)
• CLI's and configurations (f.e. prompts, aliases, colors)
• Optional: Many developers create a repo with what are known as dotfiles. An export of all their configuration files. You can try to set-up your own if you feel a bit adventurous. Here are two examples from Mathias and Danny.

Receive input from users on the server and manipulate that data for your own feature using HTTP request methods.

Todo

• Receive data from the user
• Manipulate the data
• Store the data in a JSON file (for now)
• Inject data dynamically into page

• Do some data modelling
• Draw the structure of your Database
• Use MongoDB CRUD Operations
  • Update current db helper functions to Create Update Read Delete

Try to implement and research atleast one build tool in your project and document in your wiki. Often times you can implement build tools by playing around with your start scripts in the package.json (concurrently or npm-run-all can help).

Pro Tip™: Build tools (or asset pipelines) can get complex very easily. When you end up using multiple build tools in the same project, you'll quickly find that you need an additional tool (e.g. Gulp, Webpack) to orchestrate all these different pieces. Don't start using these until you really have to, as they can be very overwhelming to configure properly if you're not already comfortable with the various build-tools and steps.

Todo

• Research Preprocessors
• Research Bundlers