My project idea was to give tech companies a better organization tool to help with projects. Starting with the front end this is the file structure i utilized:
Services: This is where I put all of my “crud” functions to communicate with my Rails API.
By creating a static baseUrl and headers, i am able to keep my code as DRY as i can, making it look prettier and easy to read. Static functions are class methods, meaning they are used for functionality that belongs to the class as a whole and cant be called on one instance of that class.
Global.js: Is a small file but very important. This is where all of the magic starts.
Storing these elements in a constance insure that it will not get resigned and ultimately breaking something on the page. Creating elements like inputs and forms and being able to give them specific id’s makes it more easier to create and use event listeners and functions. For example:
In this code snippet, i created a function that would take the form link element and added a click event to it that would in turn render the project form so a user can fill in that information. Key note events have certain default behaviors. In this case, clicking on a href link will cause the page to redirect to that link. By specifically telling the function to prevent it from doing that, Im able to render the project from without having to redirect ultimately saving time and improving user experience.
Index.html: This is where it all comes together. The files get scripted in to work together in giving the user a uniformed experience through the webapp.
Setting up my Rails API backend couldn't be easier. Running
rails new "project name" --api gets rails to setup in api mode. Then using