Giter VIP home page Giter VIP logo

daily-drinks's Introduction

daily drinks

Stack

  1. vite
  2. react
  3. tailwind

Check list

  • Homepage is a list to list all the orders
  • Each order contains the following fields:
    1. A single-line text of it's name
    2. The number price of the order
    3. A multi-line optional text to specify additional notes
  • One can add a new order to the list by filling out a form somewhere in your app
  • One can delete any order in the list
  • One can also edit any order in the list

Additional

  • every item(drink) in order can add, delete and edit
  • every note can add, delete
  • easy valid (filed no empty, price no 0)
  • can save in LocalStorage

by benben


here is original instruction

Instruction

At _, we love handmade drinks. Sometimes we just go out and buy from the store nearby, sometimes we order ourselves by filling out a form and call for delivery.

Please build an web app named dailydrinks which has the following features.

  • Homepage is a list to list all the orders
  • Each order contains the following fields:
    1. A single-line text of it's name
    2. The number price of the order
    3. A multi-line optional text to specify additional notes
  • One can add a new order to the list by filling out a form somewhere in your app
  • One can delete any order in the list
  • One can also edit any order in the list

Notes

  1. Please use React with functional component(hook) and Typescript to build the app.
  2. Starter-kit like create-react-app are allowed and actually encouraged, we don't want to waste any of your precious time setting up environment.
  3. Please avoid using CSS frameworks too heavily, we want to see how you build your app from scratch, and how your CSS skills are. However for some cases it's reasonable to style a portion of your app with pre-defined style. Inevitably, we will be somewhat subjective about this, but you are more than welcome to discuss the thoughts behind the choice you make.
  4. You are free to use any npm packages out there you like, but just like CSS frameworks, only use them when it makes sense and use them with caution. Again, we are going to be somewhat subjective, welcome to describe your intention.
  5. The style and any additional features or details not specified in the above requirements are completely free to play with. You don't have to make the UI very beautiful but at least it should be well-organized.
  6. Your app normally will be run entirely on desktop, but if your app supports RWD, you should mention it in README.
  7. Pay attention to basic accessibility and user experience, make your app easy to use for normal users.
  8. Make sure your app runs in the last 2 versions of Chrome, Firefox, and macOS Safari.
  9. The app should be fully functional without any back-end server or database, you can just store your state in memory.
  10. Keep your source code clean, organized and modularized, we will be reviewing them.
  11. Testing are bonus and are not required.
  12. Keep security, performance, maintainability, and scalability in mind, develop your app as a minimal product, think about what users want. We will be working a lot with product team, attention to detail can help us work smoother.
  13. You don't have to make your app super complete or fully-featured. The time we estimiated(typo: estimated) is 2 hours, you can spend more or less, but please don't spend too much time on it, it will only be a reference for the next phase of the interview process.
  14. Upload your app to (Or just code entirely on) CodeSandbox when done, make sure your app behaves normally in the preview too. Alternatively if your app for some reason cannot run on it, you can push your app to GitHub, GitLab, or Bitbucket. Please make sure to set up permission setting to let us view your project.
  15. Create a file under the root directory called README.md, briefly describe your application and, if you've implemented any additional features, a detailed but simple description about how to use them. Documenting is also a very important skill we value.
  16. Send us back an email along with the link of your application via reply. Once you've submitted the code, please don't update it afterwards. If for some reason the app breaks because of it, we won't be able to identify the cause.

daily-drinks's People

Contributors

benben6515 avatar

Stargazers

Roman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.