You have an idea, an innovation, an invention — building something is your goal, reaching users is the method, and monetary acquisition is your path. Entrepreneurs make, sell, and reach new heights everyday, so why can’t you?
Meet the M.V.P or Minimum Viable Product. A usable idea-based solution that fits the framework of your larger objective and becomes the solution to showcase your concept, gain funding, and move forward while gaining traction.
Figma - Minimum Viable Product (Roadmap) | Create an MVP with a modern framework for product…
Figma Community file - Create an MVP with a modern framework for product success.
Multiple Step Processes
Trust the process is a common turn of phrase that is immensely true here. Figured out what your problem is, the solution to your problem, and then identify who, what, where, and why users would find your solution as a successful outcome.
Matrices and Lo-Fi mock-ups can help test & validate the concept, while working in tandem with actual users to motivate the outcome can increase the result’s capability. As in each state of play, you should become more aware of your solution and it’s ability t0 result success for everyone involved.
Lean Startup Methodology
The goal is to be lean, meaning costing little, and doing much. There are many software's that do a lot, there are also many solutions that cost a lot. Your goal in lean is to position the concept very narrowly so that the exact solution is precise and can quickly create success.
Success leads to users, users lead to money, and money leads to a bigger and better product. If you start small, you miss small, so there is little for you to lose and much for you to gain in positioning a product with little boundaries and many opportunities.
If you remember ever hearing about surface area, you can imagine this as such, if your product serves a large audience, and has little pre-established requirements, then you are able to position and reassemble to continue moving in a specific direction, also known as, pivoting.
For this example I will venture through the above M.V.P roadmap with interactive examples that help correlate how this method work, from start, to MVP.
It can be difficult to quickly calculate the difference in hours between two floating points.
A calculator that could compute these two instances and them add them algorithmically.
Use-Cases, Features, Action Points, and Priorities
In this case the user is a group of business employees that would need a way to quickly calculate these outcomes, separate from any software used to enter or schedule these events.
Leaving out monetization is a goal to get to a top down solution quickly, and then validate product market fit, which is equivocally important and should be the method normally followed.
Users at least should be able to enter information into inputs and receive a results as an outcome of the practice to find success. The total solution, at most should include a login, storing, and features for the users to track and compare their results overtime.
There could be much simpler solutions, much better solutions, and way more complex solutions but the pillar of the product market fit is that once you have enter these times, there is visualization that helps logically understand time-spent.
The initial problem was inspired by an app, this app does not have these features, therein, they can be integrated to be competitive.
There should be simple inputs, a success based submissions and a successful output of the calculation.
Success Validation & Research
Developing a solution would require being able to compute the difference of the times as duration, then the distance between each of the two times within twenty-fours hours.
In this scenario, the duration is during the same day, so there is an accepted belief that these outcomes occur, in the same day. It is important to the experience for users to be able to enter AM/PM to establish the difference between when the difference happens as a 24hr duration and return a simple outcome.
The changes here to the UI could either be to use 24:00 times, add an input for AM/PM, or even have a selection between the two, where also the form validation could accept an entered response or settings for results within a 12 hour span.
In this scenario, the simplest resolution to this idea is to use an advanced statistical calculator method such as Google Sheets. In this sense, Sheets has preset hour increments, also minutes, and seconds.
It converts the hours to twenty four hour times, and then results them into a calculated duration. This is a calculation in the application to hide from the user, and keep them focused on inputs, rather than additional calculation.
The gap is that infrequently users are versed in twenty four hour times, so entering the AM/PM reference is a much more comfortable and quick format, handling the equation would be the application in this sense.
There are also addition applications that net these values for you, built on top of sheets/excel. You can reference the initial office precedents for cell formats to make quick use of converting and establishing the base-line.
Calculate the difference between two times
Let's say that you want find out how long it takes for an employee to complete an assembly line operation or a fast…
Calculate time in Excel: time difference, add, subtract and sum times
The tutorial explains different ways to calculate times in Excel and demonstrates several methods of adding times and…
Calculate Duration Between 2 Times, Easy & Free
There are 2 basic methods to calculate the difference between 2 times. For instance, what is the duration between…
Simulations like this let you validate the concept and think through how your users could make use of a simpler application in which solves the need and improves upon continuous use.
Following the alignment and tuning of the M.V.P the beginning of the product development turns to the coding phase of the solution. As design, experience, and interface begin to unfold in the first sets of iteration, now the interaction, processing, and computing takes over.
Moving the MVP it into an additional method like React Native or Electron once you have the concept developed, helps progress the pace to market. Packages can accelerate the development process as well, where in which can be replaced by business driven code later on.
Minimum Viable Architecture
For this project the architecture outlines Tailwind with Next.js to mockup a working application that will validate the concepts above as the minimum viable product.
Initialize the product by following the Next.js application documentation and create a new application. Once you have the application running, test the development environment and then move forward.
yarn create next-app
Create Next App | Next.js
The easiest way to get started with Next.js is by using create-next-app. This simple CLI tool enables you to quickly…
yarn run dev
The documentation brings us to the first step of choosing how in which to navigate the framework, depending on our application. For Tailwind, follow the application for the Next.js configuration
Install Tailwind CSS with Next.js - Tailwind CSS
Start by creating a new Next.js project if you don't have one set up already. The most common approach is to use Create…
yarn -D tailwindcss@latest postcss@latest autoprefixer@latest
Once Tailwind is installed you can move to an example setup from their documentation pages, or mirror the example from the play page, which is one of the most fitting layouts for the MVP, so jump in there.
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the…
Now that you have an application setup for building the basis of the application it is an important point to define how in which the functionality will align with the information your application is looking to exchange.
Login or Functionality
This could be your login page if authentication is core to the application, though here, first in this scenario, with the above the focus is to build the inputs, then collect them inputs, and render a result based on the Google Sheets example.
Minimum Viable Functionality
Forms are a series of HTML inputs that require valid inputs and then a handler in .PHP to submit the information and either pass it to the database or return a result.
The HTML5 input types - Learn web development | MDN
That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be…
In this case, a great way to handle forms within react is to utilize state to create a layer on the DOM, to be able to pass back information to the components as props (properties). For this, with the addition of HTML5 form fields, you can use Formik, which will handle validation, and application state.
Formik comes with battle-tested solutions for input validation, formatting, masking, arrays, and error handling. This…
yarn add formik
- HTML: HyperText Markup Language | MDN
elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and…
<input type="time" required>
Forms in the initial phase require hooks to process data, on change event handlers to switch data, and databases to receive the information to process back. You could handle these form events on change, and useRefs to reinput the examples, but that would go against the full application solution.
Partially Viable Functionality
As chosen the Formik solution has ability to extend forms and send data to a databse with hooks and event handlers. Playing to this strength, the M.V.P functionality will emulate how this would occur within a database, to further the understanding of what full-functionality could progress.
Using Formik to Handle Forms in React | CSS-Tricks
There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a…
React + Formik Dynamic Form Example
Built with React 16.13.1 and Formik 2.1.5 Other versions available: This is a quick example of how to build a dynamic…
You can see Formik is quite a solution, the ideas is less about controlled the inputs of the form but parse and redistributing this data. Eventually the content of the form, submitted, will inform features and improve the understanding of total hours.
React Formik updating one field based on another · Issue #1840 · formium/formik
❓Question I'm using formik react library and trying to update 2 fields, based on the onChange event of anothers. For…
How do I use jquery in react app?
Jquery was one of the handiest libraries for the developer community, but in this era or js we really not need jquery…
After the Minimum Viable Product is developed, you can take the problem statement and the solution to the stage, conference room, group and hand-off a working example with functional code that will be able to deliver feedback and testing.
Single-Page Application - React & Tailwind Powered by Next.js | Calculate the duration of time that occured between two…
React Hourly Time Calculator
Calculate the duration of time that occured between two times.
Now that you have an MVP there are thousands of ways to move this to the next level, pivot the positioning, and develop solutions through the lens of a focused experiment. You can begin, now to build a brand around a product and continue to understand your offering.
If you are looking for ways to develop a UI and work on the UX before moving to development — which is recommended, you can jump into Figma to create and build a solution for pre-validation. For presentations, you can utilize tools like Morflax to extend your UI into a real world model.