Table of Contents
Here's a blank template to get started: To avoid retyping too much info. Do a search and replace with your text editor for the following: github_username, repo_name, twitter_handle, linkedin_username, email_client, email, project_title, project_description
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
This is an example of how to list things you need to use the software and how to install them.
- npm
npm install npm@latest -g
- Get a free API Key at https://example.com
- Clone the repo
git clone https://github.com/github_username/repo_name.git
- Install NPM packages
npm install
- Enter your API in
config.jsconst API_KEY = 'ENTER YOUR API';
- Change git remote url to avoid accidental pushes to base project
git remote set-url origin github_username/repo_name git remote -v # confirm the changes
Currently, we will be using Helvetica Neue Sans-Serif as our primary font, with the font size being set using vh/vw.
Example: className="text-[5vw] font-[Helvetica Neue]"
(Note that most text should be Helvetica Neue by default, but if it isn't, setting it manually can be done as above.)
We will be refactoring to make use of MUI's SvgIcon icons, rather than images. Follow the following links for more information about how we'll be doing this: https://mui.com/material-ui/getting-started/ https://mui.com/material-ui/material-icons/?query=home
We'll be using colors according to the image below.
For a form container, we'll be using something like this:
<div className="w-[50vw] mx-auto my-[2vh] p-[3vh] ">
while for our Save Button, we'll be following this example.
bg-cyan-600 text-white px-[2vw] py-[1vh] rounded w-[10vw] hover:bg-cyan-700 focus:ring-cyan-500 focus:ring-2
For our form boxes, we'll be using this styling.
<label htmlFor="email" className="block text-gray-700 font-medium mb-[1vh]"> Email </label> <input className="w-full px-[1vh] py-[1vh] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500" name="email"/>
When we get text that's too long for our designated page area, we will cut that text off after a certain point, then insert a "Read More" button. This will open a modal containing the full version of the previously-truncated text.
When creating tables and forms, we'll be alternating between white and grey-100 for the background, and when we wish to create a button or search bars, we'll generally style them like this unless specifically told otherwise:
<button className='bg-cyan-600 text-white p-[1vh] rounded w-[10vw]'>Add New +</button>
<input className='p-[1vh] border-2 border-slate-800 rounded w-[12vw] h-full' />
For an example of what this might look like in practice, see below.
Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
For more examples, please refer to the Documentation
- Feature 1 - Login
- Feature 2 - Home
- Feature 3 - Companies
The Companies section allows users to seamlessly manage a list of their companies.
Key functionalities include: • View All Companies: Browse a comprehensive list of companies with detailed information such as company name, application status, and notes. • Create a Company: Add new companies by filling out a simple form with fields like name, website, address, and notes. • Search for a Company: Use the search bar to quickly find companies by name, enhancing efficiency and user experience.
- Feature 4
- Nested Feature
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Your Name - @twitter_handle - email@email_client.com
Project Link: https://github.com/github_username/repo_name