DEV Community

loading...

The Identity Platform For The People

rawkiesthinker profile image rawkiesthinker Updated on ・2 min read

As I wait for my team to switch the VM back on so that I can get back to work, I decided to hack together a quick login page, for a coding challenge I accepted to do last week. (in the spirit of being apart of a coding community, never been apart of one before).

In my years of programming, there are a few good practices, I neglected, one of the most important ones was creating a repo. (I have lost many a code due to this neglect)

So here is the codebase of the "Identity Platform For The People" (I just had to build it for the people it's a thing now)

This is more of an intro and my official acceptance to the #CodingWithKamo challenge

I have been yearning to learn a new language, and I decided to to take on any new challenge I find on the internet with reasonml Who does not love a challenge

Let us begin

The challenge was to create a login page, here is how I went about it

"Identity Platform For The People"
After cloning the project below I run the modified script below from reasonML docs

replacing "-my-react-app" with "." so it can generate the project within the cloned project and not create a new folder


npm install --global bs-platform@6.2.1
bsb -init . -theme react-hooks
npm install && npm start


in another tab
npm run server

With that done I created a folder named components inside of /src

/src/components

Input.re

[@react.component]
let make = (~name) =>{


  <input id={name} placeholder={name} type_="text"></input>;


};
Enter fullscreen mode Exit fullscreen mode

/src/Login
Login.re

[@react.component]
let make = (~name) =>{


<div>
<Input name="username"/>
<Input name="password"/>
<button type_="submit">{ReasonReact.string(name)}</button>
</div>


};

Enter fullscreen mode Exit fullscreen mode

/src
Index.re

// Entry point

[@bs.val] external document: Js.t({..}) = "document";

ReactDOMRe.renderToElementWithId(<Login name="Login" />, "login");

Enter fullscreen mode Exit fullscreen mode

and for all those that have used react, are used to having a div element with a _login id within the index.html page

/
index.html

//
<body>

  <div id="login"></div>
//
</body>

Enter fullscreen mode Exit fullscreen mode

This is my submission to the first #CodingWithKamo

Learning Points

type is reserved withing reason, using type_="" allows the use of it within input elements

Coming Up

This is the first of many, there is still a lot that needs to be done, the first thing is styling.

Discussion (0)

Forem Open with the Forem app